A custom navigation UI for Power BI Embedded mobile reports
When using Power BI Embedded to embed reports in mobile mode, the API expects you to handle navigation programatically. This dependency-free, Vanilla JS plugin takes care of that by appending a page navigator to the DOM and calling the API functions responsible for page navigation on user click. It was made to mimic the desktop report page navigation, but the source CSS is available for you to customize it.
Live demo available at https://rschpdr.github.io/pbi-pages/.
npm install --save pbi-pages
OR
Just grab the src folder, put it into you project folder, and import it into your project. If you're not using a ES6 transpiler you might need to edit the export default statement, I think.
Don't forget to import (or copy/paste if you're not compiling your CSS) the CSS file!
The source js file exports a pbiPages function that accepts two arguments: your generated report and a configuration object. To learn how to generate a report object, refer to the official Power BI Javascript docs here.
The conf object currently has two keys:
el: reference to the DOM element that the plugin will try to append itself. Defaults to a div with idpbiPagesContainer;defaultPage: int that defines what page the plugin will try to load first. Defaults to 1. The report has an array with all it's available pages, so you should check that array to see what page you want to load first.
Example:
import * as pbi from 'powerbi-client';
import pbiPages from 'pbi-pages';
// Power BI stuff here
// Embed the report and display it within the div container.
const report = powerbi.embed(document.querySelector('.report'), config);
// Pass the newly created report object to the plugin
pbiPages(report);