Hiding Power BI report filter pane from report viewers in Power Apps Portal embedded report

Filter pane is a familiar functionality when building reports in Power BI Desktop and using reports in Power BI Service. Hiding filter pane is often a requirement when you want to prevent users from changing filter conditions and save spaces for visualizations. It is straight forward and easily be done by turning off the filter pane visibility from report viewers in Power BI Desktop.

Unfortunately, it has stopped working with embedded report in Power Apps Portal since recent weeks. It is still working with reports in Power BI Service. I think this is a bug for Microsoft. But I had to something instead of waiting for MS and I figured out below solution.

Power BI Javascript to the rescue

I looked into how the report is embedded in the portal and found out that the liquid template to embed the report is generating components which use Power BI Javascript library. So I looked in to Power BI Javascript and found out I could use the library to interact with the embedded report.

In my case, I need to update the report settings to hide the filter pane. More details here: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Update-Settings

Detailed Steps

1. Login to the portal as an admin or content editor.
2. Navigate to your web page.
3. From top right corner of the portal, in the editor toolbar, click Edit to open Web Page Editor

4. Open Options tab and put below code snippet in the Custom JavaScript box.

$( document ).ready(function() {
  var rpEle = $('.portal-pbi-embedded'); // select report element
  var report = powerbi.get(rpEle[0]); // get report instance
  // we want to update settings when the report is loaded
  report.on("loaded", function () {
    const newSettings = {
      panes: {
        filters :{
          visible: false // hide filter pane
        }
      }
    };
    report.updateSettings(newSettings)
      .catch(error => { console.log(error) });
  });
});

5. Save changes

In conclusion, not just hiding filter pane, we can basically interact with the embeded report in many ways that are documented here https://github.com/Microsoft/PowerBI-JavaScript/