Avoid report re embedding on route change in Angular

[Marco57]

Hello,

I have an angular component containing my html container on which the embedding is going to happen. Now on route change, this component is getting destroyed and so does its html container containing the report. When user is getting back to the report route, the component is initializing again and re embedding from scratch the report, removing any changes made from the user to the report.

I would like to know if there are means to make the report survive it component destruction. I thought about means like making the embedding process happening in a service being called from the component displaying the report. Issue is I do not see how to set that practically and what exactly should the service return : the html container or the result of pbi.embed() method?

This is currently the method called from my service onInit of my report viewer component:

this.powerbiService
      .getReportEmbedInfoById()
      .subscribe(async (data) => {
        if (this.pbiContainerElement) {
          const embedConfig = this.powerbiService.buildEmbedConfig(data);
          powerbi.reset(this.pbiContainerElement);
          this.myReport = powerbi.embed(this.pbiContainerElement, embedConfig);
          // report.off removes all event handlers for a specific event
          this.myReport.off('loaded');
          // report.on will add an event handler
          this.myReport.on('loaded', () => {
            this.powerbiService.handleTokenExpiration(this.myReport);
            loadedResolve();
            // this.myReport.off("loaded");
          });
      });

 Thanks for any support.

[sdk1990]

Hi @Marco57 

We have the same issue. Can you please share how you were able to resolve it and if the recommendation provided by v-shex-msft worked? Thanks!

[Anonymous]

HI @Marco57,

According to your description, it sounds like you want to avoid the user changes on your report?
If that is the case, I'd like to suggest you not sharing the 'edit' permission to this report, then changes on this content will be reset when the report reload.

Regards,
Xiaoxin Sheng

[Marco57]

Hi @Anonymous,

I actually want to keep the changes from user to the report as long as they did not ask explicitlly to refresh the report, thus re embedding it and getting the original version of it. I am currently embedding it as view mode only.

Some temporary changes are being made from the user but when he navigates to another root of the web application embedding the report, then the embedded report is destroyed and embedded again from scratch when user gets back to the report root of the web application.

What I want is to find a way to not re start the full embedding process when Angular changes its route to a differente one from within the web application. If the user explicitly refreshed the web application, then it is ok that it embeds a report from scratch, but not on route change.

Thanks

Rgds

Marc. 

[Anonymous]

Hi @Marco57,

So you mean to keep current changes avoid refresh when you change data source?
If that is the case, you can enable the persistent filter or try to create a global variable to save current filters and restore them to the new report contents after the report refreshed:

Enable persistent filters in a Power BI embedded analytics application | Microsoft Docs

Create, edit, and save an embedded report | Microsoft Docs

Regards,
Xiaoxin Sheng