Hiding PowerBI report filter pane

Follow my previous post I explain how to embed a report from PowerBI, now I want to give you the code for hiding in PowerBI the report filter pane from report viewers in an embedded report.

Filter pane is a familiar functionality when building reports in PowerBI Desktop and using reports in PowerBI 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 PowerBI Desktop.

In PowerBI Desktop, select View and then Filter. So, the filter pane won’t display on the report but it will appear in the embedded report.

Another configuration I used is from the PowerBI portal. Under the report Setting, there is a section called Filtering experience. Deselect those options won’t affect the report and the filter pane will appear.

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

PowerBI JavaScript to the rescue

I looked into how the report is embedded in the portal. I 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 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

As you may have read from the Embed Configuration Details page, there are report-specific settings such as filterPaneEnabled and navContentPaneEnabled that can be set at load time. They can also be changed dynamically, as in the following example:

const newSettings = {
  panes: {
    filters :{
      visible: false
    },
    pageNavigation:{
      visible: true
    }
  }
};

report.updateSettings(newSettings)
  .catch(error => { ... });