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
11 Comments
- v-cazheng-msft
Community Support
Status changed:NewtoInvestigating - 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.
Best Regards,
Community Support Team _Caiyun Zheng
- gaurangrossRegular Visitor
Thanks for the update. However, still not working. See the below screenshot. (Using report in view mode)
- v-cazheng-msft
Community Support
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.
Best Regards,
Community Support Team _Caiyun Zheng
- gaurangrossRegular Visitor
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
- v-cazheng-msft
Community Support
Please try the lastest version powerbi-client (2.18.6) to check whether this issue can be resolved.
Best Regards,
Community Support Team _Caiyun
- gaurangrossRegular Visitor
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
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.Allpermission 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
- gaurangrossRegular 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:InvestigatingtoDoneCurrently, we haven't seen a plan for it, but you can propose this idea in Power BI Ideas.
Best Regards,
Community Support Team _Caiyun