Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

0

PwerBI embeded ActionBar not showing

We are trying to enable ActionBar in our embedded report as mention in this document https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/embed-for-organization using client API. However, it does not seems to be working and same behaviour in PowerBI Playground. Below is the code snippet. 

 

 

 

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    /*-----------------------------------------------------------------------------------+
    |    Don't change these values here: access token, embed URL and report ID.          | 
    |    To make changes to these values:                                                | 
    |    1. Save any other code changes to a text editor, as these will be lost.         |
    |    2. Select 'Start over' from the ribbon.                                         |
    |    3. Select a report or use an embed token.                                       |
    +-----------------------------------------------------------------------------------*/
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
            bars: {
                actionBar: {
                    visible: true
                }
            }
        }
    };

    // Get a reference to the embedded report HTML element
    let embedContainer = $('#embedContainer')[0];

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

// Insert here the code you want to run after the report is rendered

 

 

 

Status: Delivered

@gaurangross 

 

Currently, we haven't seen a plan for it, but you can propose this idea in Power BI Ideas.

 

Best Regards,

Community Support Team _Caiyun

Comments
v-cazheng-msft
Community Support
Status changed to: Investigating
 
v-cazheng-msft
Community Support

Hi @gaurangross 

 

I've tested in Power BI Embedded playground with these code from you. Unfortunatelly, I can't repro your issue. 

vcazhengmsft_0-1635142715250.png

 

Best Regards,

Community Support Team _Caiyun Zheng

gaurangross
Regular Visitor

Hi @v-cazheng-msft 

 

Thanks for the update. However, still not working. See the below screenshot. (Using report in view mode)

 

gaurangross_0-1635199239752.png

 

v-cazheng-msft
Community Support

@gaurangross 

 

According to the screenshot, you are testing with the sample report, right? Please test these code with a selected report from your organization to see whether action bar  is still not added to your report.

vcazhengmsft_1-1635224306141.png

 

Best Regards,

Community Support Team _Caiyun Zheng

 

gaurangross
Regular Visitor

Hi @v-cazheng-msft 

 

Thanks, a report from your organization now working and the action bar is now visible in playground. However, still not working for our internal application. We use powerbi-client version 2.18.4 to render the powerbi (embedded) report in our angular application. 

 

Not sure what is wrong. No error or warning on our application. See below 

 

gaurangross_1-1635380348398.png

gaurangross_2-1635380539074.png

 

v-cazheng-msft
Community Support

@gaurangross 

 

Please try the lastest version powerbi-client (2.18.6) to check whether this issue can be resolved. 

 

Best Regards,

Community Support Team _Caiyun

gaurangross
Regular Visitor

Hi @v-cazheng-msft 

 

Upgraded powerbi-client library to version 2.18.6, but no luck. Even I tried a new angular component for PowerBi https://github.com/microsoft/powerbi-client-angular#demo  but same behaviour in this application as well. 

 

We are using power bi embedded for customer. 

 

Thanks,

Gaurang

v-cazheng-msft
Community Support

@gaurangross 

 

Ok, thanks for your feedback. According to the documentation https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/configure-report-settings#bars. In view mode the action bar is only supported for the embed for your organization scenario.

For the action bar in view mode it’s recommended to enable UserState.ReadWrite.All permission for your Azure AD application. This permission is required to allow end users to add the report to their favorites, and for enabling personal bookmarks and persistent filters. Please try the solution mentioned here.

 

Best Regards,

Community Support Team _Caiyun

 

 

 

 

gaurangross
Regular Visitor

Thanks, @v-cazheng-msft , You can close this. 

 

Is there any plan to make it available in future for embedded for customer scenario?

v-cazheng-msft
Community Support
Status changed to: Delivered

@gaurangross 

 

Currently, we haven't seen a plan for it, but you can propose this idea in Power BI Ideas.

 

Best Regards,

Community Support Team _Caiyun