Embedded PowerBi report using mobile layout

Question

I'm trying to display an embedded PowerBi report from an external website (a html page served by nodejs). I can display the report with desktop layuot but not with mobile layout (the mobile layout is already created and published).

¿How can I embed a report using the mobile layout?

This is my report configuration:

    let reportLoadConfig = {//type: report
        type: "report",
        tokenType: models.TokenType.Embed,
        accessToken: embedData.accessToken,

        // Use other embed report config based on the requirement. We have used the first one for demo purpose
        //embedUrl: embedData.embedUrl[0].embedUrl,
        embedUrl:embedData.embedUrl[0].embedUrl,
        // Enable this setting to remove gray shoulders from embedded report
         settings: {
             //background: models.BackgroundType.Transparent,
             layoutType: models.LayoutType.MobilePortrait,
             filterPaneEnabled: false,
             navContentPaneEnabled: false
         }
        
    };

    // Embed Power BI report when Access token and Embed URL are available
    let report = powerbi.embed(reportContainer, reportLoadConfig);

Answer 1

If you are using the Embed Power BI GitHub Examples, please verify:

1- All report pages have to have a mobile layout created.

2- Set the property layoutType to MobilePortrait in report Config var (client side JavaScript code)

3- If your code uses powerbi.bootstrap, verify this part:

//powerbi.bootstrap(reportContainer, { type: "report" });  //This was the default code example
//I changed the code to:
powerbi.bootstrap(
    reportContainer,
    {
        type: 'report',
        hostname: "https://app.powerbi.com",
        settings: {
            layoutType: models.LayoutType.MobileLandscape
        }
    }
);

4- Inside index.js (client side JavaScript) Verify the code:

         let reportLoadConfig = {//type: report
        type: "report",
        tokenType: models.TokenType.Embed,
        accessToken: embedData.accessToken,

        // Use other embed report config based on the requirement. We have used the first one for demo purpose
        //embedUrl: embedData.embedUrl[0].embedUrl,
        embedUrl:embedData.embedUrl[0].embedUrl,
        // Enable this setting to remove gray shoulders from embedded report
         settings: {
             //background: models.BackgroundType.Transparent,
             layoutType: models.LayoutType.MobilePortrait,
             filterPaneEnabled: false,
             navContentPaneEnabled: false
         },
         
        
    };

5- Finally, you can write a custom javascript function (on client side) to verify the screen size and load landscape or portrait layout, something like this:

window.addEventListener('resize', async ()=>{
//write a function to detect the screen size
let isMobile=await isMobileScreen(); 

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

if(isMobile){ //this returns true or false
    newSettings = {
        layoutType: models.LayoutType.MobilePortrait
    };
    report.updateSettings(newSettings);//update the report settings
}else{
    report.updateSettings(newSettings); //update the report settings
}});

Answer 2

Here's our script. I'm just the middle man, so I don't fully undertand it. What I understood was that Luis' script needed to refresh the page before the new layout took effect. Our changes address that.

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
    let newSettings = {
        layoutType: models.LayoutType.MobileLandscape
    }; 

    if (isMobile) { //this returns true or false
        newSettings = {
            layoutType: models.LayoutType.MobilePortrait
        };
    }

    // Initialize iframe for embedding report
    //powerbi.bootstrap(reportContainer, { type: "report" });
    powerbi.bootstrap(
        reportContainer,
        {
            type: 'report',
            hostname: "https://app.powerbi.com",
            settings: newSettings
        }
    );

    $.ajax({
        type: "GET",
        url: "/embedinfo/getebiriver",
        success: function (data) {
            embedData = $.parseJSON(data);
            reportLoadConfig = {
                type: "report",
                tokenType: models.TokenType.Embed,
                accessToken: embedData.EmbedToken.Token,
                // You can embed different reports as per your need
                embedUrl: embedData.EmbedReport[0].EmbedUrl,

                // settings config
                settings: newSettings
            };

Feel free to copy/combine and roll the answer into your own, and then i'll delete this.