Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago
Solved

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 "Fi...
Need Help
  • Eric_Zhang's avatar
    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's avatar
    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

     

Eric_Zhang's avatar
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's avatar
    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's avatar
      Google5ive
      Frequent Visitor
      3 years ago

      where do you put this coding 

  • Anonymous's avatar
    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.