Determine LayoutType of Embedded PowerBI report

[andyparkerson]

How do I determine whether a report is loaded in MobilePortrait or MobileLandscape via the Javascript API?

I want to add a button on the embedding page that will toggle between mobile and desktop versions of a report.

I can change between the two with the report.updateSettings() function, but I can't figure out how to determine the current settings. Specifically what the layoutType setting is currently set to.

Thanks,

Andy Parkerson

[andyparkerson · Accepted solution]

I figured this out. At load, you can look at the configuration settings, which are stored in the report object.

let report = powerbi.get(document.getElementbyId('embed-container'));
let models = window['powerbi-client'].models;
let isMobile = report.config.settings.layoutType == models.LayoutType.MobilePortrait;

 The variable isMobile is a boolean that shows you if the report is mobile or not.

Caution: If you change the layout to MobilePortrait with the report.updateSettings() function, this will no longer work. You could keep track of that in the document at each toggle.

function toggleMobile() {
    let settings = document.isMobilePortrait ? {layoutType:window['powerbi-client'].models.LayoutType.MobileLandscape} : {layoutType:window['powerbi-client'].models.LayoutType.MobilePortrait};
    report.updateSettings(settings).then(() => {document.isMobilePortrait = !document.isMobilePortrait;});
}

[v-linyulu-msft]

HI,@andyparkerson 
We are delighted that you have found a solution and are willing to share it.

Accepting your post as the solution is incredibly helpful to our community, as it enables members with similar issues to find answers more quickly.

Thank you for your valuable contribution to the community, and we wish you all the best in your work.

Best Regards,

Leroy Lu