Solved: Re: How to Hide Power BI iFrame Embedded Report Ta...

mhasanbulli · ‎02-01-2017

Hi,

I am trying to build a web app that embeds one particular Power BI report. Since this is only one report, I would like to hide "Filters" and the tabs. I was able to figure out how to hide "Filters" using

&filterPaneEnabled=false

which I found on the forums. However, there are no hints if it is possible to hide the report tabs. There is one report and there is no reason to have tabs (at least for my purposes).

Is this possible? If so, where do we find all this information? How are we supposed to know what options are available for modifying the look?

Cheers.

Eric_Zhang · ‎02-02-2017

@mhasanbulli

You can surely hide the page navigation with Power BI Javascript API. Check a more elegant demo Custom Page Navigation.

<html>
   <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
   <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
   <script type="text/javascript">
      var embedConfiguration = {
          type: 'report',
          accessToken: 'eyJ0YourTokenHereA',
          id: '719c43ad-xxxxx-f79e8f58c1a6',
          embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=719c43ad-b663-xxxxxxx-f79e8f58c1a6',
      	settings: {
                      filterPaneEnabled: false,
                      navContentPaneEnabled: false
                    } 
      }; 
      
      var report;
      
      window.onload = function () {  
      var $reportContainer = $('#reportContainer'); 
       report= powerbi.embed($reportContainer.get(0), embedConfiguration);
        
      }  
      
   </script>
   <div id="reportContainer"></div>
</html>

View solution in original post

Eric_Zhang · ‎02-02-2017

@mhasanbulli

You can surely hide the page navigation with Power BI Javascript API. Check a more elegant demo Custom Page Navigation.

<html>
   <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
   <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
   <script type="text/javascript">
      var embedConfiguration = {
          type: 'report',
          accessToken: 'eyJ0YourTokenHereA',
          id: '719c43ad-xxxxx-f79e8f58c1a6',
          embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=719c43ad-b663-xxxxxxx-f79e8f58c1a6',
      	settings: {
                      filterPaneEnabled: false,
                      navContentPaneEnabled: false
                    } 
      }; 
      
      var report;
      
      window.onload = function () {  
      var $reportContainer = $('#reportContainer'); 
       report= powerbi.embed($reportContainer.get(0), embedConfiguration);
        
      }  
      
   </script>
   <div id="reportContainer"></div>
</html>

View solution in original post

abhi123 · ‎09-27-2017

Hi mhasanbulli,

Below link will help you to solve your problems related to power bi embed with JS. Let me know if anything more needed.

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

Thanks,
Abhi.

abhi123 · ‎09-27-2017

Hi mhasanbulli,

Below link will help you to understand each and every terms of how to embed report , how to get pages details , and many more customization etc.

https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/index.html

Thanks,
Abhi.

albertoderossi · ‎02-17-2018

Is there a way to hide the page selector in the bottom of the frame? the one tha looks like this: < 1 of 5 >

We want to deliver specific pages for especific users

albertoderossi · ‎02-17-2018

Is there a way to hide the page selector in the botom of the frame? the one that looks like this: < 1 of 5 >

We need to deliver especific pages to specific users

Thx

Nirav1 · ‎09-20-2018

How to Hide Power BI Particular page out multiple page from the code side.

Not to hide from BI right click and check

veeramohan_m · ‎02-13-2019

Hi @mhasanbulli

I tried the solution that you have marked but I couldnt hide the filters pane and navigation pane.

I am working on an on-premise Power Bi Report server and trying to publish a report from the report server to the web.

When I attach the URL query parameter "?rs:Embed=true" to the report URL, I can see it in fullscreen. But When I add the "&filterPaneEnabled=false" parameter, the URL just ignores it.

Please suggest me what I am missing.

Thanks,

Mithra

andyparkerson · ‎10-30-2019

If you have already rendered your report, you can remove the page tabs like this:

// get the container the report is embedded into
var reportContainer = document.getElementById('reportContainer');
// get the report
var report = powerbi.get(reportContainer);
// create new settings
var settings = {navContentPaneEnabled: false};
// update the settings
report.updateSettings(settings);

How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI Particular page

Re: How to Hide Power BI iFrame Embedded Report Tabs

Re: How to Hide Power BI iFrame Embedded Report Tabs

Helpful resources

New Ranks and Rank Icons in 2020

New Kudos Given Badges Coming

November 2019 Community Highlights

Power Platform World Tour