Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
nhnkhoa
Frequent Visitor

Hiding filter pane is not working for embedded report in Power Apps Portal

Hi,

I'm having this issue with hiding filter pane in embedded Power BI report in Power Apps Portal. Although I already hide the filter pane in PowerBI Desktop, it still shows up in embedded repot in Portal. Funny that this was working before until lately, and it is hidden as expected in Power BI Service.

I'm using liquid template to embed the report to the portal following this guide: 

https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/add-powerbi-report

Is it possible that new updates change this bevior?

Please help.

1 ACCEPTED SOLUTION
nhnkhoa
Frequent Visitor

Hi @sean_tm @paulmacf 

 

I've fixed the issue using PowerBi Javascript. Please read more about it here:

 

But I think this is still an issue for Microsoft.

 

Let me know if you can sort it out. 

 

Cheers!

 

View solution in original post

16 REPLIES 16
Waterstraal
New Member

I am running into this issue when embedding Power-BI visuals in Power Pages.

 

The Power Pages editor does not have options to turn off the filter and navigation page:

Waterstraal_0-1699626985418.png

Please fix this Microsoft...

 

As a workaround, I tried the proposed JavaScript solution as posted here. That solution worked most of the time, but sometimes it would throw a `You attempted to get an instance of powerbi component associated with element` error (often in Firefox). I think it must be a timing issue, where the power-bi instance is not yet there when the script runs.

 

Therefore, I went a different route, using a mutation observer: I wrote a script that appends '&navContentPaneEnabled=false&filterPaneEnabled=false&actionBarEnabled=false' to dynamically added iframes in the page (which is what Power Pages does when embedding power-bi visuals). 

 

Here is the script, which I added to the footer of my Power Pages site: 

<script type="text/javascript">
 
/***************************************************************************
  * Hide filter and page navigation pane for EVERY embedded power-bi report *
  * *************************************************************************/
  const pbiObserver = new MutationObserver((mutationsList, observer) => {
    mutationsList.forEach((mutation) => {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeName.toLowerCase() === 'iframe' && node.src.indexOf('powerbi.com') !== -1) {
            node.src += '&navContentPaneEnabled=false&filterPaneEnabled=false&actionBarEnabled=false';
          }
        });
      }
    });
  });
  pbiObserver.observe(document.body, { childList: true, subtree: true });
</script>
Note: the whole document body is observed in this solution; it can be optimized to only observe divs with a powerbi class. I did not find any significant performance issues though.
fdze11123
New Member

Are there any updates from microsoft on this? At the moment we cannot stand the workaround proposed and we'd like to have it in a similar fashion of the power bi service one. Thanks

 

nhnkhoa
Frequent Visitor

Hi @sean_tm @paulmacf 

 

I've fixed the issue using PowerBi Javascript. Please read more about it here:

 

But I think this is still an issue for Microsoft.

 

Let me know if you can sort it out. 

 

Cheers!

 

Thanks for the solution.

It was working last week and we were about to demo the embeding capabilities today. And surprise! the Filter pan appeared.

 

We have also tried the following and it works:

 

<div ... powerbi-settings-filter-pane-enabled="false"></div>

We got this from here: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details

 

Thanks again.

Thanks, @SamiAssi. Glad that it is working out for you!

 

Hi @sean_tm , I think Javascript is our best solution for this issue at this stage while MS is working on it. You can use Javascript to either update embedded report settings like I did or add settings attributes to report containter div element like @SamiAssi  did.

 

I can show you if you want, just leave me a message in my inbox or in my Linkedin.

 

Cheers!

Hi @Syndicate_Admin - how exactly did you implement the fix, I have read the links and the suggestions of:

 

powerbi-settings-filter-pane-enabled="false"

powerbi-settings-nav-content-pane-enabled="false"

 

 

But don't know how to incorporate these into an embedded report? 

I'm no HTML expert - how could it be accommodated in this - and if you know how to increase the height also that would be greatly appreciated!

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12" powerbi-settings-filter-pane-enabled="false" powerbi-settings-nav-content-pane-enabled="false">
      {% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/XXXXX/reports/XXXXX/ReportSectionXXXXX"   %}
    </div>
  </div>
</div>
nhnkhoa
Frequent Visitor

Hi @Oex ,

 

Basically, you will need to update the embedded report settings using Javascript in the portal web page custom script. Please see my blog post for more details: https://dyncrmexp.com/2020/06/05/hiding-power-bi-report-filter-pane-from-report-viewers-in-power-app...

 

Thanks @nhnkhoa - it would be really useful in here or your blog to add screenshots of where/how to implement the code in a 'web page custom script' - whilst I am familiar with Embedding and the JavaScript Playground, I'm new to portals - so a how to would be very useful! 

 

My guess would be to add a template something like this, but renders no report in the page

 

<!-- Default Power BI Embedded template -->
<script>
$( 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
            },
            pageNavigation:{
            visible: false
            }
        }
    };
    report.updateSettings(newSettings)
      .catch(error => { console.log(error) });
  });
});
</script>

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      {% include 'Page Copy' %}
    </div>
  </div>
</div>
nhnkhoa
Frequent Visitor

Hi @Oex ,

 

After you setup the report to show up in the page, please follow below steps:

1. Login to the portal as an admin or content editor.

2. Navigate to your web page containing the report.

3. From top right corner of the portal, in the editor toolbar, click Edit to open Web Page Editor

WebPageEditorToolbar.png4. In Web Page Editor, Open Options tab and put the code snippet in the Custom JavaScript box.

WebPageEditorCustomScript.png

 5. Save changes

Hello @nhnkhoa,

 

This is not working for me. Do you need to add (or change) sometihing else to the code?

 

Thanks,

Absolute lifesaver, very much appreciated!

Thanks @nhnkhoa ,
Forgive my ignorance, but our internal skill set is admittedly not development heavy. Are you able to use these JavaScript calls with the Liquid Tag embedding?

My understanding from last looking into it was using the Power BI JavaScript API required a significantly different setup method than the out of the box integration. We would like to keep maintenance simple. Would be nice to get rid of that Report Tab Bar though.

Thanks for raising the support ticket @paulmacf , let us know how it goes. I think I should do the same at this point.

Hi @nhnkhoa 

 

Thank you for the information and glad that has worked for you. Certainly worth us exploring this.

We have a ticket with MS support and waiting for that before going down any other route. Will post any updates.

 

Thanks

paulmacf
Frequent Visitor

Getting this as well. Filter pane is now visible where it wasn't previously. This has allowed our customers to expose data that should not be visible and thus we have had to remove the report entirely for now.

That's too bad 🙁 We're about to Go Live in our case and this is definitely a show stopper.

sean_tm
Regular Visitor

Same issue just started for us. Hiding the Power BI Filter Pane worked for months with no problem in our Power Apps Portal. 

 

As a temporary fix, saving the report with the Filter Pane in a colapsed state and changing the text and borders to white (to match the background) will hide the Filter Pane from the end user. 

 

However, this is not ideal. You can still expand the Filter Pane if you find the right spot to click. It also makes editing report filters more cumbersome. 

 

We would also appreciate a fix for this issue.

 

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors