cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Orangesweater
Regular Visitor

Power BI- How to hide page navigation bar when embedding using iframe

Dear community,

I'm using the URL created by Power BI to embed my dashboard.
After some research in this forum I've already tried to extend the URL by the following:

 

navContentPaneEnabled=false

 

This didnt result in any kind of changes.

 

We are navigation through the dashboard through a more elegant way (links and buttons), so there is no need for the page navigation at all.

1 ACCEPTED SOLUTION
yingyinr
Community Support
Community Support

Hi @Orangesweater ,

You can refer the method from the last reply of mrothschild in the following thread:

Hiding Navigation Pane in iframe


This worked for me.  I'm not a coder, so I don't understand why, and I used trial & error to get the right cropping using the numbers in "clip:rect" below, but beyond that, don't have a capacity to answer questions on this.  

<div id="content">
    <div style="height:580px;width:960px">
      <iframe width="960" height="580" src="[URL LINK]" frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect(0px,1100px,543px,0px);
            bottom:-0px; allowFullScreen="true" ></iframe>
   </div>
</div>

In addtion, you can achieve it by Javascript&colon;

Disable page navigation

yingyinr_0-1636362954842.png

Best Regards

Community Support Team _ Rena
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

3 REPLIES 3
yingyinr
Community Support
Community Support

Hi @Orangesweater ,

You can refer the method from the last reply of mrothschild in the following thread:

Hiding Navigation Pane in iframe


This worked for me.  I'm not a coder, so I don't understand why, and I used trial & error to get the right cropping using the numbers in "clip:rect" below, but beyond that, don't have a capacity to answer questions on this.  

<div id="content">
    <div style="height:580px;width:960px">
      <iframe width="960" height="580" src="[URL LINK]" frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect(0px,1100px,543px,0px);
            bottom:-0px; allowFullScreen="true" ></iframe>
   </div>
</div>

In addtion, you can achieve it by Javascript&colon;

Disable page navigation

yingyinr_0-1636362954842.png

Best Regards

Community Support Team _ Rena
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
nageshk
Frequent Visitor

Hi

 

I tried the javascript solution. I also tried the following solution: 

https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/update-settings

 

add settings to the report config -

https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/embed-paginated-report

 

manually add url parameters - 

navContentPaneEnabled=false&filterPaneEnabled=false&actionBarEnabled=false

 

However, none of the above worked for me. Please help.

 

&navContentPaneEnabled=false

Works like a charm! Thanks!

Helpful resources

Announcements
September Update

Check it Out!

Click here to learn more about the September 2022 updates!

Power BI Show episode 9

The Power BI Community Show

Watch the playback when Priya Sathy and Charles Webb discuss Datamarts! Kelly also shares Power BI Community updates.

Power BI Dev Camp Session 26

New Date - Check it Out!

Mark your calendars and join us on Thursday, October 6 at 11a PDT for a great session with Ted Pattison!

Top Solution Authors