Make it possible to set the active page from outside the powerbi-client

[erikmom]

In one of our products we embed a power-bi report in an angular application. However, instead of using the tabs inside the power-bi report, we'd like to have our own menu in the angular app. So in the embeddedConfig, we set navContentPaneEnabled: false and when a menu item is clicked in the angular app we update the embeddedConfigwith a different pageName.

But this does not do anything, probably because in function embedOrUpdateReport there is this code:

    if (this.containerRef.nativeElement && this.embedConfig.embedUrl !== prevEmbedConfig.embedUrl) {
      this.embedReport();
    }

However, we don't use an embedUrl, instead we only use id, groupId, accessTokenand pageName. It seems there is no way to only set the active page from outside the powerbi-client component.

I can think of two ways:

• Exposing a setActivePage callback function.
• When the embeddedConfig changes and only the pageName is changed, instead of calling the embedReport function, only set the active page.

Or, if there is another way to set the active page, I'd like to know how to do it.

[KotanaSai21]

You can get the report object in your app and use the report to set the page using setPage API.

  @ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
   const report: Report = this.reportObj.getReport();
    report.setPage('<Page Name'>);

To get the Page Name use getPages() API. Note that page-name should be one of the name property from getPages() because displayName is different from it. Refer to Page

Refer to Page navigation in a Power BI embedded analytics application. | Microsoft Learn

Feel free to reach out for any other queries.