Page navigation
When you load a Power BI report in an application, you can use the Power BI Client APIs to navigate between its report pages. For example, you can set the default page or change a page dynamically. Doing so allows you to create your own custom page navigation to match your brand. You can also automatically change pages based on a set criteria to show a user certain visuals and information.
Each page in a report is represented by a Page object. To return all the of pages in a report, call the report's getPages method, which returns the pages as a collection of Page objects. The collection of pages is returned in the same order as in the report.
The Report class defines the getPages method as follows:
getPages(): Promise<Page[]>
For example:
let pages = await report.getPages();
How to navigate between report pages
Use the Page and Report objects in your application to navigate between report pages, as shown by the code examples in the following sections.
Set the active page
Use the setPage method of a Report object to make an existing page the active page of a report.
The Report class defines the setPage method as follows:
setPage(pageName: string): Promise<void>
For example:
await report.setPage("page2");
Make the current page active
Use the setActive method of a Page object to ensure the page is always valid for a given report. To get Page objects, call getPages on a Report object.
The Page class defines the setActive method as follows:
setActive(): Promise<void>
For example:
await page.setActive();
Add an event handler
When you monitor a user's page navigation in a report, you need to be aware of when a user changes pages. To do so, add an event handler for the pageChanged event. For example:
report.on('pageChanged', event => {
const page = event.detail.newPage;
console.log(page.name);
});
For more information about events, see How to handle events.