Page Navigation

As you may have read from the Embed Configuration Details page, you can set a default page when loading a report. You can also change pages dynamically which allows you to create your own custom page navigation which can match the brand of your application or automatically change pages based on some other context of your application to help show the user the correct visual/information.

report.getPages()
 .then(pages => {
     ...
 });

The pages list returned are instances of the Page class that can be directly used to change pages.

page.setActive();

This process of first retrieving pages and then calling setActive on a page instance helps ensure the pages are always valid for the given report; however, if you know the page name ahead of time and don't want to be required to call getPage you can instantiate a Page instance by calling:

const page = report.page('ReportSection1');
page.setActive();

Keep in mind that because this page was manually created there is not a guarantee it exists in the report and the request to change pages could fail.

Keeping your application in sync with the report

When building a custom page navigation control it will be required to keep this updated with the state of the report. You can do this by adding an event handler for the pageChanged event as shown below:

report.on('pageChanged', event => {
   const page = event.details.newPage;
   this.selectedPage = page;
});