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

Check that there is a mobile layout defined for all the report pages. — Andrey Nikolov
– Andrey Nikolov, Commented Mar 2, 2021 at 6:52
Thanks, I found the problem. It was inside the JavaScript client code. Check the answer below — Luis Olivares
– Luis Olivares, Commented Mar 3, 2021 at 15:49

Luis Olivares · Accepted Answer · 2021-05-04 16:05:55Z

3

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

edited May 4, 2021 at 16:05

answered Mar 3, 2021 at 15:47

Luis Olivares

2314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sir Swears-a-lot Over a year ago

Thank you. This just worked for us also. Now we just need to figure out how to make it responsive and switch layouts.

Luis Olivares Over a year ago

Hi, you can write a custom javascript function (on client side) to verify the screen size and load landscape or portrait layout. I edited the answer with an example. I hope this help you.

Sir Swears-a-lot Over a year ago

Thank you. This really helped us achieve mobile portrait vs landscape. However when I added the js from 5. i now only receive a blank screen on mobile (note desktop landscape still works). Could it be due to the initial layout setting included in the bootstrap command in 3. ?

Luis Olivares Over a year ago

Hi, Did you check that there is created a mobile version of your report? The initial layout can be changed inside your code with no problem. Check this documentation learn.microsoft.com/en-us/javascript/api/overview/powerbi/…

Luis Olivares Over a year ago

That's sounds great!

|

Sir Swears-a-lot · Accepted Answer · 2021-05-03 20:16:26Z

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.

Collectives™ on Stack Overflow

Embedded PowerBi report using mobile layout

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related