Switch between mobile and desktop view in power bi embedded

I have a power bi report with both desktop and mobile views. I'd like the browser to switch between these views as it resizes. The only way I can currently achieve this is to embed two instances of the report into the browser, one mobile the other desktop, and hide and show them depending on the browser size.

The problem with this is that if I set some filter values when in the desktop view then, narrow the browser so that the mobile view is shown, then the filter values are not same, this obviously being because there are in reality two separate reports.

The other downside of this approach is that I am presumably also incurring the performance cost on my database of generating two reports.

What can I do to only embed a single report that can dynamically switch between mobile and desktop views?

UPDATE Following response below, test code to toggle layout between mobile and custom layout

angular.element($window).on('resize', function () {
if (vm.report === null)
return;

var models = window['powerbi-client'].models;

var newLayout = models.LayoutType.Custom;
if (window.innerWidth < 768) {
newLayout = models.LayoutType.MobilePortrait;
}

if (vm.report.config.settings.layoutType !== newLayout) {
const newSettings = { layoutType: newLayout };
vm.report.updateSettings(newSettings);
}}


UPDATE 2, Added code to show how the report is generated

// report config
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: result.accessToken,
embedUrl: result.embedUrl,
id: result.reportId,
permissions: models.Permissions.View,
viewMode: models.ViewMode.Read,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false,
background: models.BackgroundType.Transparent,
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToPage
}
}
};

// get elements and embed them
var desktopReportContainer = $('.reportContainer')[0];
vm.report = powerbi.embed(desktopReportContainer, config);


1 Answer
1

Instead of embedding two instances of a report you can do:

Change the layout type by updating settings like here: change-layout-example.
The downside of this approach is that your user's cross filters will not be saved when changing layout.

Before changing the layout type, save a bookmark and then after changing the layout type apply the saved bookmark:

function changeLayout(layoutType) {
report.bookmarksManager.capture()
.then(function (capturedBookmark) {
var bookmarkState = capturedBookmark.state;

var config = {
layoutType: layoutType
};
report.updateSettings(config).then(function () {
report.bookmarksManager.applyState(bookmarkState);
})
})
}


Please note that you will have to add error handling code to the sample above.

Use Custom layout instead of mobile layout like here: Dynamic report layout.
The downside of this approach is that you will have to write code that sets the layout dynamically.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.