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. This allows you to create your own custom page navigation to match the brand of your application, and to 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 in the returned list are instances of the Page class that can be directly used to change pages. The order of pages returned is in the same order as in the report.

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 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 no guarantee that 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 you must keep it 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;
});