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
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