Embed For Mobile

If you are interested on integrating Power BI Embedded in a mobile application, you can use the following capabilities to enhance your project.

Embed a report in mobile layout

First you will need to create a report with mobile layout using Power BI desktop. After you created the report you can embed it using JavaScript SDK. In order to decide in which layout to embed, use the layoutType property of settings in embed configuration.

There are two layout types dedicated to mobile devices:

1. MobilePortrait - Optimized for portrait view (This is the mobile layout you created on Power BI desktop)
2. MobileLandscape - Optimized for landscape view. This layout looks like the regular report layout.

*The layout will be determined by this property regardless of the device actual orientation

Load a report in mobile layout Example:

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
	type: 'report',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://app.powerbi.com/reportEmbed',
	tokenType: models.TokenType.Embed,
	accessToken: 'h4...rf',
	settings: {
            layoutType: models.LayoutType.MobilePortrait
        }
};

You can also change the layout type after loading a report using updateSettings

Change layout example:

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

You can check if a page has a specific layout using the hasLayout method

Using hasLayout example:

report.getPages().then(function (pages) {
    pages[0].hasLayout(models.LayoutType.MobilePortrait).then(function (hasLayout) {
        Log.log(hasLayout);
    })
});

HasLayout returns a boolean.

Swipe events

When embedding a report in mobile layout, you can listen on swipe events and trigger custom behavior. There are two swipe events, 'swipeStart' & 'swipeEnd' both implement the ISwipeEvent interface:

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Example of using swipe events:

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        Log.logText("Swipe left detected");
    }
});

Notes

• You can use phased loading in order to use hasLayout before loading the report.
• If you try to embed a report page with MobilePortrait layout and the page does not have a mobile layout, the page will be loaded with MobileLandscape layout.
• if you want to change page while on mobile layouts it is recommended that you use report.setPage.

Embed report with custom layout

You can harness the power of report embed custom layout to create customized layouts that are optimized for mobile display.

Embed dashboard in one column view

The recommended way to embed dashboard in a mobile device is by using "one column" view. This embeds the dashboard tiles in one single column which best fits mobile display.

Embedding dashboard in one column example:

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
	type: 'dashboard',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe54',
	embedUrl: 'https://app.powerbi.com/dashboardEmbed',
	tokenType: models.TokenType.Embed,
	accessToken: 'h4...rf',
        pageView: "oneColumn"
};

var $dashboardContainer = $('#dashboardContainer');
var dashboard = powerbi.embed($dashboardContainer.get(0), embedConfiguration);