Customizing Embedded Report Toolbar Icons

[tks1011]

Is there a way to hide specific toolbar icons inside the embedded PowerBI report:

[tks1011]

We Wanted to hide these particularly highlighted icons in the PowerBI report action bar. Below are the approaches we tried to work around this problem but did not find any solution:

1. According to these documentations

    Use the action bar to enhance user experience in a Power BI embedded analytics application | Microso...

    Configure embedded report settings | Microsoft Learn

    You can either completely hide or show the action bar but in the documentation, there is no mention of how to hide icons of the action bar.

    From the documentation we can only control the visibility of panes, bookmarks and bars.

    2. Attempt to manipulate Action Bar using bindPowerBIevents:

    Unable to manipulate the Action Bar using ‘render’, load’, 'dataSelected' and ‘clickButton’ events, but were unable to access the elements:

      3. Manipulating the document of IFrame:
      Tried to hide the action bar textbox button with the help of browser console and successfully hid it (in the reportEmbed level), but when tried to access it by below code in the top level (parent page) it shows NULL:

      Even though the iframe we are getting from the inspect element(browser) of the embedded report and the iframe we are getting from the above code is exactly same and both have the desired button but when we tried this code: 

      We are getting ‘NULL’ when we run the code: 

      Also, when we try to access the contentWindow of the iFrame it gives CORS error:
 

      4. Attempted to make a custom visual and pass javascript into it to manipulate the action bar but the DOM of this custom visual was limited to itself only and could not access any parent page or PowerBI report elements:

Since the above approaches did not yield the desired results, I would greatly appreciate your assistance in finding a solution to customize the action bar (specifically, hiding icons).

[Anonymous]

Hi @tks1011 ,

Please review the following links, I hope they will assist you in achieving the requirement.

Configure embedded report settings | Microsoft Learn

Use the action bar to enhance user experience in a Power BI embedded analytics application | Microso...

var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: '<Your Report ID>',
    embedUrl: '<Your Embed URL>',
    accessToken: '<Your Access Token>',
    tokenType: models.TokenType.Embed,
    settings: {
        panes: {
            filters: {
                visible: false
            },
            pageNavigation: {
                visible: false
            }
        },
        navContentPaneEnabled: false,
        layoutType: models.LayoutType.Custom,
        customLayout: {
            displayOption: models.DisplayOption.FitToWidth
        },
        toolbar: {
            visible: true,
            exportData: false,
            bookmarks: false,
            filters: false,
            comments: false,
            custom: [{
                name: "customButton",
                title: "Custom Button",
                icon: "<svg>...</svg>",
                tooltip: "Click this custom button",
                onAction: function() {
                    console.log("Custom button clicked");
                }
            }]
        }
    }
};

Best Regards