Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Prepping for a Fabric certification exam? Join us for a live prep session with exam experts to learn how to pass the exam. Register now.

Reply
Anonymous
Not applicable

How to Hide Power BI iFrame Embedded Report Tabs

‎02-01-2017 01:17 PM

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.

 

Labels:
Message 1 of 20
83,485 Views
0
2 ACCEPTED SOLUTIONS
Eric_Zhang
Microsoft Employee
Microsoft Employee

‎02-02-2017 10:26 PM

@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

Message 2 of 20
89,801 Views
AdrianLock
Helper I
Helper I

‎06-05-2023 06:00 AM

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

 

View solution in original post

Message 18 of 20
28,450 Views
19 REPLIES 19
AdrianLock
Helper I
Helper I

‎06-05-2023 06:00 AM

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

 

Message 18 of 20
28,451 Views
AJTK
Frequent Visitor
In response to AdrianLock

‎01-04-2024 05:07 PM

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!

Message 19 of 20
19,453 Views
0
AdrianLock
Helper I
Helper I
In response to AJTK

‎01-05-2024 12:41 AM

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

Message 20 of 20
19,437 Views
0
FMVigoCC
New Member

‎09-06-2022 05:28 AM

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!

 

Message 16 of 20
38,253 Views
0
aiswaryabhole
New Member
In response to FMVigoCC

‎03-13-2025 07:51 AM

Were you able to resolve this?

Message 17 of 20
1,990 Views
0
ARodenbusch
Advocate I
Advocate I

‎05-29-2020 11:38 AM

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

&filterPaneEnabled=false&navContentPaneEnabled=false

Message 12 of 20
66,006 Views
duardo08
Advocate I
Advocate I
In response to ARodenbusch

‎08-03-2022 10:32 AM

Worked here, thank you very much!

Message 15 of 20
39,368 Views
0
Karman
New Member
In response to ARodenbusch

‎06-07-2022 08:59 PM

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.

Message 14 of 20
41,134 Views
0
michaelsh
Kudo Kingpin
Kudo Kingpin
In response to ARodenbusch

‎10-11-2020 01:47 PM

Thanks, @ARodenbusch !

&navContentPaneEnabled=false - works great!

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

Message 13 of 20
60,050 Views
veeramohan_m
Frequent Visitor

‎02-13-2019 02:43 AM

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

Message 11 of 20
75,653 Views
Nirav1
New Member

‎09-20-2018 12:53 AM

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

Not to hide from BI right click and check

Message 10 of 20
77,041 Views
0
abhi123
Frequent Visitor

‎09-27-2017 10:22 PM

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.

Message 9 of 20
81,312 Views
0
abhi123
Frequent Visitor

‎09-27-2017 10:12 PM

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.

Message 6 of 20
81,312 Views
0
albertoderossi
Frequent Visitor
In response to abhi123

‎02-17-2018 09:11 AM

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

Message 8 of 20
79,499 Views
albertoderossi
Frequent Visitor
In response to abhi123

‎02-17-2018 09:07 AM

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

 

Message 7 of 20
79,499 Views
0
Eric_Zhang
Microsoft Employee
Microsoft Employee

‎02-02-2017 10:26 PM

@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>
Message 2 of 20
89,802 Views
Anonymous
Not applicable
In response to Eric_Zhang

‎05-10-2022 05:57 AM

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.

Message 5 of 20
42,071 Views
0
andyparkerson
Advocate I
Advocate I
In response to Eric_Zhang

‎10-30-2019 10:17 AM

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);
Message 3 of 20
70,865 Views
0
Google5ive
Frequent Visitor
In response to andyparkerson

‎10-26-2022 01:02 PM

where do you put this coding 

Message 4 of 20
35,801 Views
0

Helpful resources

Announcements
May PBI 25 Carousel

Power BI Monthly Update - May 2025

Check out the May 2025 Power BI update to learn about new features.

May 2025 Monthly Update

Fabric Community Update - May 2025

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

View All