cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Syndicate_Admin
Administrator
Administrator

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.

14 REPLIES 14

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>

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

Absolute lifesaver, very much appreciated!

Hello @nhnkhoa,

 

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

 

Thanks,

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (1,279)