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

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.

Need Help

Eric_Zhang

9 years ago

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>

AdrianLock
3 years ago
I know this is an old post. However for anyone one else who comes cross this page and wonder why it did not work. This will not work with the standard BI link you get once you publish report in our case to a workspace. You will need to do the following to get the right link: -

Once Published go to the file menu.
Then select </> Embed Report
Followed by Website or portal
Copy the link below Here's a link you can use to embed this content
Paste this into web browser
Add the following to the end of the link &navContentPaneEnabled=false
You should now get a full screen page with no page navigations showing

19 Replies

ARodenbusch
Advocate I
6 years ago
Add (concat) at the end of your PowerBi report URL:
&filterPaneEnabled=false&navContentPaneEnabled=false
- michaelsh
  Kudo Kingpin
  5 years ago
  Thanks, ARodenbusch !
  &navContentPaneEnabled=false - works great!
  Is there a list of all URL parameters I can use?
- Karman
  New Member
  4 years ago
  Unfortuntely, adding &navContentPaneEnabled=false at the end of iframe src doesn't work for me. Instead, I found a css hack to cut off the bottom navigation tabs from the UI by wrapping the iframe component with an additional div with shorter height.
  
  <div id="reportContainer" class="dds__d-none" style="height:804px; overflow-y:hidden"> <iframe id="reportFrame" onload="powerBiLoaded()" frameborder="0" seamless="seamless" class="viewer pbi-frame" style=" width: 100%; height: 840px;" src="https://example.com"> </iframe> </div>
  
  The navigation tabs in iframe is about 36px in height. Just have to set the outer container height 36px less than the iframe height and overflow-y:hidden. This would hide the bottom navigation bar in the iframe from view.
- duardo08
  Advocate I
  4 years ago
  Worked here, thank you very much!
AdrianLock
Helper I
3 years ago
I know this is an old post. However for anyone one else who comes cross this page and wonder why it did not work. This will not work with the standard BI link you get once you publish report in our case to a workspace. You will need to do the following to get the right link: -

Once Published go to the file menu.
Then select </> Embed Report
Followed by Website or portal
Copy the link below Here's a link you can use to embed this content
Paste this into web browser
Add the following to the end of the link &navContentPaneEnabled=false
You should now get a full screen page with no page navigations showing
- AJTK
  Frequent Visitor
  2 years ago
  Yes! This helped so much, thanks!
  
  As a follow-up question, When I copy and paste that, it hides all pages except for the first report page. Is it possible to select which page I want to show and hide all others? Thanks again!
  - AdrianLock
    Helper I
    2 years ago
    It will only show the reports that are made visible. Plus you must have a navigation bar setup as well to replace the default one you have just hidden

Eric_Zhang

Microsoft Employee

9 years ago

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>

andyparkerson

Advocate III

6 years ago

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

Google5ive
Frequent Visitor
3 years ago
where do you put this coding

Anonymous
Not applicable
4 years ago
Hi!
I can't seem to get this to work. i'm not very smart when it comes to this so maybe i'm doing something wrong but when i copy paste your code and exchange the URL to my embed. i don't get any changes.

Anonymous
Not applicable
7 years ago
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
abhi123
Frequent Visitor
8 years ago
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.
- albertoderossi
  Frequent Visitor
  8 years ago
  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
- albertoderossi
  Frequent Visitor
  8 years ago
  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
abhi123
Frequent Visitor
8 years ago
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.
Nirav1
New Member
7 years ago
How to Hide Power BI Particular page out multiple page from the code side.
Not to hide from BI right click and check
FMVigoCC
New Member
3 years ago
Hi!
Super nice stuff here! Question: how can one hide the PowerBI footer at the end of an iframe?
Any chance there is a simple "&...." to add to the embed link?
Thanks!
- aiswaryabhole
  New Member
  1 year ago
  Were you able to resolve this?

Forum Discussion

How to Hide Power BI iFrame Embedded Report Tabs

19 Replies

Related content

Copilot in embedded Power BI reports via iframe

Powerbi embedded iframe IOS scrolling issues

Embedding Power BI Org App in an iFrame

Embedded Report Iframe Caching

Blank Page - Embedded Report