cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

How to Hide Power BI iFrame Embedded Report Tabs

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).

snip_20170202100451.png

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.

 

1 ACCEPTED SOLUTION
Eric_Zhang
Microsoft
Microsoft

@Anonymous

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

10 REPLIES 10
ARodenbusch
New Member

Add (concat) at the end of your PowerBi report URL:

&filterPaneEnabled=false&navContentPaneEnabled=false

Thanks, @ARodenbusch !

&navContentPaneEnabled=false - works great!

Is there a list of all URL parameters I can use?

veeramohan_m
Frequent Visitor

Hi @Anonymous

 

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

Nirav1
New Member

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

Not to hide from BI right click and check

abhi123
Frequent Visitor

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.

abhi123
Frequent Visitor

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.

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

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

 

Eric_Zhang
Microsoft
Microsoft

@Anonymous

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

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);

Helpful resources

Announcements
Power BI December 2021 Update_carousel 768x460.jpg

Check it Out!

Click here to read more about the December 2021 Updates!

User Group Leader Meeting January 768x460.png

Calling all User Group Leaders!

Don't miss the User Group Leader meetings on January, 24th & 25th, 2022.

Jan 2022 Dev Camp 768x460 copy.png

Power BI Dev Camp- January 27th, 2022

Mark your calendars and join us for our next Power BI Dev Camp!

Top Kudoed Authors