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

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>

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support Team
Community Support Team

Re: showing only specific page when embedding multipage report

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

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

Re: showing only specific page when embedding multipage report

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

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

Re: showing only specific page when embedding multipage report

@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.

 

 

Highlighted
Yaostha Regular Visitor
Regular Visitor

Re: showing only specific page when embedding multipage report

Hi,

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

Thanks for your advice.

 

Regards,

Yasotha