Forum Discussion
Power BI Embedding in Angular
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?
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
4 Replies
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
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 ?
