Forum Discussion

andyparkerson's avatar
andyparkerson
Advocate 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 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

Need Help
  • andyparkerson's avatar
    andyparkerson
    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;});
}

2 Replies

  • andyparkerson's avatar
    andyparkerson
    Advocate III
    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;});
}
    • Anonymous's avatar
      Anonymous
      Not applicable
      1 year ago

      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