Custom Visual becomes blank when switching to another page and back

[tarockx]

Hellow everyone

I'm developing a custom visual and I have an annoying problem: if the user goes to another page in the report and then goes back to the page where the visual was, the visual is completely blank.

I've added some logs to the console to find out why this was happening, and here is the problem: when coming back to the page the Visual's constructor is invoked (which means the visual is being re-instantiated) but, unlike with a normal page refresh, the update() method is not called. 

Furthermore, the DOM seems to be broken: even if I manually redraw the Visual from the constructor (which is not a good solution anyway, because I don't yet have the setting since update() has not been called) 

What am I doing wrong here?

[tarockx · Accepted solution]

After further testing, I didn't solve this issue but I noticed that it only happens with the developer visual. When the visual is compiled and imported the problem doesn't happen.

In other words, it seems to be a bug in the devtools rather than Power Bi in general, as it does not happen in compile visuals. So, even though I didn't find a solution, the problem doesn't affect production environments so it's not very important.

[v-mdharahman]

Hi @tarockx,

Thanks for reaching out to the Microsoft fabric community forum.

It looks like you are experiencing an issue that is related to how Power BI handles the visual lifecycle during page navigation. Specifically, when the user navigates away from a page and comes back, Power BI may re-instantiate your visual by calling the constructor, but it does not guarantee that "update()" will be called immediately afterward. This can lead to a scenario where your visual appears blank because the DOM hasn't been fully set up, or data isn't available yet.

To make sure your visual behaves correctly in this scenario, we recommend the following:

* You should avoid placing any DOM manipulation or rendering logic inside the constructor. The constructor should be used for basic variable initialization only.

* You can also use the optional "init()" method to set up your DOM structure. This method is called after the constructor and is the correct place to create your root visual elements. For example see this code:

public init(options: VisualConstructorOptions): void {
this.target = options.element;
this.target.innerHTML = `<div class="visual-container"></div>`;
}

* You can also use use the "update()" method to render or update the visual based on the incoming data and settings. This approach ensures that your visual’s DOM is properly initialized, even in cases where "update()" is delayed or not immediately triggered.

If I misunderstand your needs or you still have problems on it, please feel free to let us know.  

Best Regards,
Hammad.
Community Support Team

If this post helps then please mark it as a solution, so that other members find it more quickly.

Thank you.

[tarockx]

No offense Hammad, but I am perfectly able to ask Copilot myself 😅 Which obviously I did, that is why I know that your "solution" is just an exact copy-paste of what  Copilot replies to this question, which is of no help to anyone.

Just so you know, that answer is completely wrong, in fact the "init()" method it mentions doesn't even exist on the IVisual interface 🙄

Nothing against you, let me be clear, but if you sign yourself "Community Support Team" and you have that badge I think you should at least mention in your reply that you're posting a responde that comes from an AI bot and that you have (clearly) not tested yourself.

[v-mdharahman]

Hi @tarockx,

You're correct that the init() method isn't part of the IVisual interface, and I apologize for including inaccurate information

If you’re still working through the issue with the constructor being triggered without update(), I’d be glad to work with you on it. Feel free to share the relevant part of your visual code or any specific behavior you're observing, and we’ll dig in.

If I misunderstand your needs or you still have problems on it, please feel free to let us know.  

Best Regards,
Hammad.