Power BI Embedding in Angular

[bukar]

I successfully embedded Power BI reports into my Angular application, and most features are working as expected. I am currently implementing a state-saving and sharing mechanism that allows users to share their filter and page settings. For this, I am using the  bookmarksManager.capture  function as shown below:

private async manageBookmarkState(report: pbi.Report): Promise<void> {
  const bookMark = await report.bookmarksManager.capture({
     personalizeVisuals: true,
     allPages: true,
 });

 if (!bookMark || !bookMark.state) {
 return;
 }

 localStorage.setItem(this.bookmarkStorageKey, bookMark.state);

 this.isBookMarkPresent = true;
 }

Sharing is handled by saving the state string in the database and restoring it later for another user. Everything works fine overall, but there’s one issue: in some of our reports, we have buttons that open specific bookmarks with predefined views and filter settings. We have several such buttons, and when one is clicked, the active button becomes highlighted. However, when I restore the state using my custom function, the correct bookmark is loaded, but the wrong button remains highlighted.
Has anyone else experienced this issue?

[bukar]

The problem is that I want to restore the correct visual state before sharing prepared reports with shareholders. It’s confusing if the wrong button appears highlighted. How can I toggle a CSS class when the report is embedded in an iframe, which means I do not have direct access to its internal content? Our embedding setup is as follows:

<div id="report-container" class="report-container flex-1"></div>

And inside the component:

        const report = this.powerBiContainerService.embed(
            element,
            this.reportConfig,
        ) as pbi.Report;

With this setup: How can I make sure that the correct button is highlighted ?

[v-priyankata]

Hi @bukar 

Thank you for reaching out to the Microsoft Fabric Forum Community.

The most likely root cause of the issue is that you’re not actually clicking on the built-in bookmark buttons inside the report, but instead restoring the state programmatically through your custom function. Because of that, Power BI doesn’t trigger the internal “button highlight” logic those highlights are only activated when the actual button is clicked.

But as long as the correct bookmark content (filters, visuals, and page state) is being applied, there’s no problem with your setup. The mismatch is purely visual and by design. If you want the buttons to visually reflect the active state, you’d need to handle that highlighting logic on your application side (for example, by toggling a CSS class when a bookmark state is restored).

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

Thanks.

[bukar]

The problem is that I want to restore the correct visual state before sharing prepared reports with shareholders. It’s confusing if the wrong button appears highlighted. How can I toggle a CSS class when the report is embedded in an iframe, which means I do not have direct access to its internal content? Our embedding setup is as follows:

<div id="report-container" class="report-container flex-1"></div>

And inside the component:

        const report = this.powerBiContainerService.embed(
            element,
            this.reportConfig,
        ) as pbi.Report;

With this setup: How can I make sure that the correct button is highlighted ?