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.