Forum Discussion
set active page in report with JavaScript API.
- 9 years ago
Thanks Eric_Zhang.
I was able to resolve this and set the page dynamically.
Instead of fetching the page using page name as mentioned in my intial post, I got an array of all the pages and then set whichever page needs to be active.This worked.
My previous code:
const page = report.page(pageName);
page.setActive();My current code:
var pages = [];
report.getPages().then(function (reportPages) {
pages = reportPages;
});pages[1].setActive();
Hope this helps someone visiting here for the same issue.
You are calling page.setActive() to early before the report has loaded. You must wait until the report loaded event has fired. Also, you should use phased loading so you can set the active page to page 2 before the report is first displayed to the user. Try something like this.
// preload preload pbie scripts on this page
var preloadConfig = {
type: 'report',
baseUrl: 'https://embedded.powerbi.com/reportEmbed',
};
var preloadElement = powerbi.preload(preloadConfig);
preloadElement.onload(function () {
console.log("pbie scripts now preloaded into this page");
});
// data required for embedding Power BI report
var embedReportId = "2cf7c5c5-4e1a-4df7-a2a6-21...";
var embedUrl = "https://app.powerbi.com/reportEmbed?reportId=2cf7c5c5-...";
var accessToken = "H4sIAAAAAAAEAB1WtQ7sCBL8l5fOSmZaaQMzMzszM49xdf9-o8076K...";
// Get models object to access enums for embed configuration
var models = window['powerbi-client'].models;
var config = {
type: 'report',
id: embedReportId,
embedUrl: embedUrl,
accessToken: accessToken,
tokenType: models.TokenType.Embed,
};
// Get a reference to the embedded report HTML element
var reportContainer = document.getElementById('embedContainer');
// call load() instead of embed() to load the report while delaying the rendering process
var report = powerbi.load(embedContainer, config);
// when loaded event occurs, set current page then call render()
report.on("loaded", function () {
console.log("loaded event executing");
// call to get Pages collection
report.getPages().then(
function (pages) {
// inspect pages in browser console
console.log(pages);
// display specific page in report
var startPage = pages[1]; // this selects the second page
config.pageName = startPage.name;
// Call report.render() to display report
report.render(config);
});
});