Forum Discussion

andyparkerson's avatar
andyparkerson
Icon for Advocate III rankAdvocate III
1 year ago
Solved

Determine LayoutType of Embedded PowerBI report

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...
  • andyparkerson's avatar
    1 year ago

    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;});
    }