Forum Discussion
Power BI Embedding in Angular
I have solved the issue myself, here is the solution I found for people with a similar situation:
In addtion to tracking the state with the bookmarks.capture function I am tracking also if a bookmark was clicked:
report.on('bookmarkApplied', async (event) => { const eventDetail = event.detail as BookmarkEventDetail; const bookmarkName = eventDetail.bookmarkName; localStorage.setItem(this.namedBookmarkStorageKey, bookmarkName); await this.manageBookmarkState(report); });Then afterwards if a bookmark was applied when my report is loaded I am applying the bookmark by its name
report.on('loaded', async () => { this.onSuccessReportLoaded(); const namedBookmark = localStorage.getItem( this.namedBookmarkStorageKey, ); if (namedBookmark) { report.bookmarksManager.apply(namedBookmark); } });It is not a elegant solution but I couldnt find another way
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.
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 ?
I have solved the issue myself, here is the solution I found for people with a similar situation:
In addtion to tracking the state with the bookmarks.capture function I am tracking also if a bookmark was clicked:
report.on('bookmarkApplied', async (event) => { const eventDetail = event.detail as BookmarkEventDetail; const bookmarkName = eventDetail.bookmarkName; localStorage.setItem(this.namedBookmarkStorageKey, bookmarkName); await this.manageBookmarkState(report); });Then afterwards if a bookmark was applied when my report is loaded I am applying the bookmark by its name
report.on('loaded', async () => { this.onSuccessReportLoaded(); const namedBookmark = localStorage.getItem( this.namedBookmarkStorageKey, ); if (namedBookmark) { report.bookmarksManager.apply(namedBookmark); } });It is not a elegant solution but I couldnt find another way