Forum Discussion

bukar's avatar
bukar
New Member
9 months ago
Solved

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 ...
Need Help
  • bukar's avatar
    bukar
    9 months ago

    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

v-priyankata's avatar
v-priyankata
Community Support
9 months ago

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's avatar
    bukar
    New Member
    9 months ago

    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 ?

    • bukar's avatar
      bukar
      New Member
      9 months ago

      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