Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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>
Solved! Go to Solution.
Hi @Yaostha,
The possible cause could be the page name. I guess the page name couldn't be "Page3". Please check it out.
// 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
I found this post in 2021 and I think it's the solution is much easier now.
The page name can be taken from URL when opening the oprning the page in the service.
For example:
https://app.powerbi.com/groups/***********/reports/*********/ReportSection0c6***ee5ab
I hope this helps someone who arrives here after me 🙂
Hi @karimm ! I figured this out as well, but I'm currently trying to incorporate that into my HTML Embed code that I copied. I'm assuming that I can do something like pageName = "Name" and then do it that way? Am I thinking of this the correct way?
Hi there
The correct syntax should be something like PageName=ReportSectionabcd1234
Here are the notes I keep in Notion about this topic. I hope this helps you:
Embedding report in PowerApp/Website with parameters
EXAMPLE:
Note: the rs:Embed=true part is a must. You cannot filter without this.
Spaces in table/column names should be replaced by Table_x0020_Name
Spaces in value should be replaced by %20
The pageName value can be taken from the URL in the service. NOTE: in case the page is not reachable by the published report, hence you cannot see the URL, you can publish another temporary version after unhiding the report in the designer. The pageName (code) seems to remain.
Oh, my mistake. I think we're talking about two different implementations. I'll keep looking at other posts on the forum to see if I can get to the right answer. Thank you for your help!
Hi @Yaostha,
The possible cause could be the page name. I guess the page name couldn't be "Page3". Please check it out.
// 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
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 Thank you so much for explaining this, you seem to be the only person on the internet that knows this method. I have search so many forums trying to figure this stupid page name thing out
Hi,
After taking the Page Name from PowerBI Service and using that name, it works.
Thanks for your advice.
Regards,
Yasotha
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
16 | |
2 | |
2 | |
1 | |
1 |