cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
nagarjunb
Frequent Visitor

Hiding Navigation Pane in iframe

Hi,

 

  We are able to integrate power BI report using angular 2. But we are seeing a navigation area as highlighted in the below screenshot. This is allowing to navigating to other tiles in the report. We just need to hide this section to prevent navigation to other tiles. Please advise on how can we hide that section. Thank you.

 

hide_navigation.png

Thanks,

Nagarjun B

5 REPLIES 5
mrothschild
Responsive Resident
Responsive Resident

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>
TedPattison
Microsoft
Microsoft

How are you embedding reports? Are you using the the Power BI REST API to retreive the report's embed URL and then embedding the report using the Power BI JavaScript API?

 

It looks like you have just pasted a Publish to Web URL into an iFrame and exposed a report with anonymous access.

Hi Ted,
 
   Thanks for the response.
 
   We are using the below URL, and passing the report ID dynamically to get the report.
 
   And we are using the code below with dynamic parameters. And we are using the Angular Power BI modules to embed the reports.
  
var config = {
      type: 'report',
      accessToken: this.pbiToken,
      embedUrl: https://app.powerbi.com/reportEmbed? + this.ReportID,
      id: this.ReportID,
      pageName: this.PageName,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false
      }
    };
 
   
    var reportContainer = (<any>$('#' + this.TileID + '_' + this.ReportID)[0]); //dynamic ID
    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactorypbi.factories.wpmpFactorypbi.factories.routerFactory);
    let report = <pbi.Report>powerbi.embed(reportContainerconfig);
Thanks,
Nagarjun B

The weird thing is you have an extra navigation element that I don't ever see when I am embedding Power BI Reports. You have the navContentPaneEnabled property set to false and that is hiding the standard gray tabbed page navigation at the bottom of a Power BI report. However, you are seeing the other type of page navigation with forward and back arrows and no page names. I have only seen that navigation element before when I have used the Publish to Web feature. I will try to do a little testing on this over the weekend to see if I can recreate the problem.

Hi Ted,

 

   We are still seeing this issue. Did you get a chance to reproduce the issue. Any help is greatly appreciated. Thank you.

 

Thanks,

Nagarjun B

Helpful resources

Announcements
September Update

Check it Out!

Click here to learn more about the September 2022 updates!

Power BI Show Episode 10 Recap

The Power BI Community Show

Watch the playback when Amit Chandak, a Power BI Super User, demos how to use Field Parameters to make reports more dynamic.

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!

Health and Life Sciences Power BI User Group

Health and Life Sciences Power BI User Group

Power BI specialists at Microsoft have created a community user group where customers in the provider, payor, pharma, health solutions, and life science industries can collaborate.

Top Solution Authors