Passing In Filters to Embedded Power BI Charts

Customizing your embed experience using URL Settings

The ability to create experiences without advanced coding skills, what’s know as low-code, is truly special with this capability.

The embed URL supports several input settings that help you customize your user’s experiences. If you’re using the HTML snippet provided, make sure you update the URL in the iFrame’s src setting.

Property	Description
pageName	You can use the pageName query string parameter to set which page of the report to open. The pageName value corresponds to the end of the report URL when viewing a report in the Power BI Service, as shown below.
URL Filters	You can use URL Filters in the embed URL you received from the Power BI UI to filter the content of the embed. This can be used to build low-code integrations with only basic HTML and JavaScript experience.

How to set which page to open when the report is embedded

The value provided in the pageName setting corresponds to the end of the report URL when viewing a report in the Power BI Service.

Open the report from the Power BI service in your web browser, and then copy the URL from the address bar.

Append the pageName setting to the URL as follows:

How to filter report content using URL filters

For some advanced features, you can URL Filters  to build more experiences using the report. For example, the URL below filters the report to show data for the Energy industry.

Using the combination of pageName and URL filters can be very powerful. You can build experiences using basic HTML and a rudimentary JavaScript. For example, here’s how you can add a button to an HTML page:

HTML

<button class="textLarge" onclick='show("ReportSection", "Energy");' style="display: inline-block;">Show Energy</button>

When pressed, the button calls a function to update the iFrame with an updated URL which includes the filter for the Energy industry.

JavaScript

function show(pageName, filterValue){ //Set the baseUrl to the embed url you get from the Power BI UI var newUrl = baseUrl + "&pageName=" + pageName; if(null != filterValue && "" != filterValue) {/code> newUrl += "&$filter=Industries/Industry eq '" + filterValue + "'"; } //Assumes there’s an iFrame on the page with id="iFrame" var report = document.getElementById("iFrame"); report.src = newUrl; }

Sources:

https://powerbi.microsoft.com/en-us/blog/easily-embed-secure-power-bi-reports-in-your-internal-portals-or-websites/

https://docs.microsoft.com/en-us/power-bi/service-url-filters