1

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

Image mobile

Luis Olivares
  • 221
  • 3
  • 6

2 Answers2

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
}});
Luis Olivares
  • 221
  • 3
  • 6
  • Thank you. This just worked for us also. Now we just need to figure out how to make it responsive and switch layouts. – Sir Swears-a-lot Apr 27 '21 at 03:40
  • 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. – Luis Olivares Apr 28 '21 at 04:51
  • 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. ? – Sir Swears-a-lot Apr 29 '21 at 04:47
  • 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 https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/mobile – Luis Olivares Apr 29 '21 at 18:28
  • That's sounds great! – Luis Olivares May 03 '21 at 16:14
  • I've posted our scipt as an answer. once you've copied it let me know and i'll remove it. – Sir Swears-a-lot May 03 '21 at 20:18
  • @Sir Swears-a-lot I think we can keep your code as a complement in the new answer. Thanks for sharing! – Luis Olivares May 04 '21 at 16:08
0

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.

Sir Swears-a-lot
  • 402
  • 7
  • 20