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();

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 add an event handler for the pageChanged event as shown below:

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