Question

How can you customize the toolbar and add buttons in Power BI embedded reports?

I’m working on a Power BI Embedded project and need to customize the toolbar to add specific buttons or functionality that align with our business needs. What options and methods are available to achieve this customization, and how can they be implemented while ensuring a smooth user experience?

Answer 1

To customize the toolbar and add buttons in Power BI Embedded, follow these steps:

1. Embed the Report: Use the Power BI JavaScript API to embed the report in your app.

var embedConfig = { 

type: 'report', 

tokenType: powerbi.models.TokenType.Embed, 

accessToken: '<Embed Token>',

embedUrl: '<Embed URL>',

 id: '<Report ID>',

settings: { filterPaneEnabled: false, navContentPaneEnabled: false }

 };

var report = powerbi.embed(document.getElementById('reportContainer'), embedConfig);

Customize the Toolbar: Hide default buttons by configuring the settings property and add custom buttons outside the report. Use custom HTML buttons to trigger actions like filtering or exporting.

<button id="applyFilter">Apply Filter</button>

document.getElementById('applyFilter').addEventListener('click', function() {

var filter = { $schema: "http://powerbi.com/product/schema#basic", target: { table: "Sales", column: "Product" }, operator: "In", values: ["ProductA", "ProductB"] };

 report.updateFilters(powerbi.models.FiltersOperations.Add, [filter]);

 });

Try and optimize: Test buttons or actions to verify their function while ensuring maximum performance; customize the toolbar to ensure clarity and responsiveness.

Such that you will be able to add certain business-specified functionalities while embedding the Power BI reports.

Comments

Customize the Power BI Embedded toolbar by adding business-specific buttons for actions like filtering and exporting, enhancing user interaction and functionality.

Answer 2

You can customize the Power BI Embedded toolbar using the JavaScript API, allowing you to hide default buttons, add custom actions, or integrate external functionalities for a tailored user experience.