Forum Discussion

Yaostha's avatar
Yaostha
Helper II
8 years ago
Solved

showing only specific page when embedding multipage report

Hi,

   We have a multipage report published to PowerBI Premium work space (App Workspace).

We are using below code to embed the report into web application.

 

 

But pageName is set to specific page of the report and settings are set as below, it still shows the default page only. What could be wrong?

pageName: 'Page3',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false 
} 

 This shows Page1 though we are forcing to show Page3. Page1 is our default page of the report.

<script src="~/jquery-1.9.1.min.js"></script>
<script src="~/adal.min.js"></script>
<script src="~/powerbi.js"></script>

<script type="text/javascript">
(function() {

"use strict";

var subscriptionId = 'tenantname.onmicrosoft.com';
// Copy the client ID of your AAD app here once you have registered one, configured the required permissions, and
// allowed implicit flow https://msdn.microsoft.com/en-us/office/office365/howto/get-started-with-office-365-unified-api
var clientId = 'guid';
var config = {
subscriptionId: subscriptionId,
clientId: clientId,
postLogoutRedirectUri: window.location.origin,
resource: 'https://analysis.windows.net/powerbi/api',
prompt: 'none',
cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
embedUrlBase: 'https://app.powerbi.com/reportEmbed',
reportId: 'guid of dashboard',
groupId: 'guid of group',
response_type:'id_token'
};

// AuthenticationContext is coming from ADAL.min.js
var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);

authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}

// If not logged in force login
var user = authContext.getCachedUser();

if (!user) {
//alert('user login required');
authContext.login();
//alert('user login completed');
}

// Acquire token for resource.
authContext.acquireToken(config.resource, function(error, token) {
// alert('acquireToken fn called');
// Handle ADAL Errors.
if (error || !token) {
alert('ADAL error occurred: ' + error);
console.log('ADAL error occurred: ' + error);
return;
}

// Store our token
config.authToken = token;

$(document).ready(function(){

var models = window['powerbi-client'].models;

// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.

var embedUrl = "https://app.powerbi.com/dashboardEmbed?reportId="+ config.reportId;

// alert(embedUrl);
var pbiconfig = {
type: 'report',
tokenType: models.TokenType.Aad,
accessToken: config.authToken,
embedUrl: embedUrl,
id: config.reportId,
pageView: 'fitToWidth',

pageName: 'Page3',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false 
} 
};
var pbiconfigmessage = JSON.stringify(pbiconfig);


// Get a reference to the embedded dashboard HTML element
var dashboardContainer = $('#divDashBoardContainer')[0];

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, pbiconfig);

// Get a reference to the embedded dashboard.
var dashboard1 = powerbi.get(dashboardContainer);

// Displays the dashboard in full screen mode.
dashboard1.fullscreen();
// push the message.
// iframe.contentWindow.postMessage(message, "*");;
});

});
})();

</script>

<div id="divDashBoardContainer" style="height:758px; border-style: double; border-color: aqua; border-width: thick; "></div>

  • Hi Yaostha,

     

    The possible cause could be the page name. I guess the page name couldn't be "Page3". Please check it out.

    showing_only_specific_page_when_embedding_multipage_report

    // Get a reference to the embedded report HTML element
    var embedContainer = $('#embedContainer')[0];
    
    // Get a reference to the embedded report.
    report = powerbi.get(embedContainer);
    
    // Retrieve the page collection and loop through to collect the
    // page name and display name of each page and display the value.
    report.getPages()
        .then(function (pages) {
            pages.forEach(function(page) {
                var log = page.name + " - " + page.displayName;
                Log.logText(log);
            });
        })
        .catch(function (error) {
            Log.log(error);
        });

     

     

    Best Regards,

    Dale

8 Replies

  • v-jiascu-msft's avatar
    v-jiascu-msft
    Microsoft Employee

    Hi Yaostha,

     

    The possible cause could be the page name. I guess the page name couldn't be "Page3". Please check it out.

    showing_only_specific_page_when_embedding_multipage_report

    // Get a reference to the embedded report HTML element
    var embedContainer = $('#embedContainer')[0];
    
    // Get a reference to the embedded report.
    report = powerbi.get(embedContainer);
    
    // Retrieve the page collection and loop through to collect the
    // page name and display name of each page and display the value.
    report.getPages()
        .then(function (pages) {
            pages.forEach(function(page) {
                var log = page.name + " - " + page.displayName;
                Log.logText(log);
            });
        })
        .catch(function (error) {
            Log.log(error);
        });

     

     

    Best Regards,

    Dale

    • Yaostha's avatar
      Yaostha
      Helper II

      v-jiascu-msft

      It is kind of right. I will verify using your code.

      What we figured out is, using the diplayname of page is not helping.

      We tried copying the page name from PowerBI window when we access in powerbi workspace and it worked. 

      for my Page3, the equivalent was something like this (ReportSection78a684d020b7c400ea2c).

       

      With help of your script, I will check if i could automatically pick this name in code instead of checking in powerbi and hardcoding.

       

      Thanks for the prompt reply.

       

       

      • Yaostha's avatar
        Yaostha
        Helper II

        Hi,

           After taking the Page Name from PowerBI Service and using that name, it works.

        Thanks for your advice.

         

        Regards,

        Yasotha