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.

Hide filter pane 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
Page Editor Toolbar
  1. 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
      .catch(error => { console.log(error) });
  1. 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/

4 thoughts on “Hiding Power BI report filter pane from report viewers in Power Apps Portal embedded report

  1. This is awesome, thank you so much. Have you ran across anything where we can increase the height/width of the box the Power BI report is embedded in?


      1. Thank you for your response @Khoa, I’m a bit of a novice at JS. Could you please help me understand how would you integrate the custom layout with the JS code that you wrote to hide the filter pane?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s