Show mobile version of powerbi page in powerapps portals

Question

We are trying to get a PowerBi report embedded in a Powerapps portal to show the mobile view of the report.

As described here, I’m testing with a report which only have mobile enabled pages.

This is the code I use to request the mobile version, as documented here.

let report = (await powerbi.get($('.portal-pbi-embedded')[0]))
let page = (await report.getPages()).find(i=>i.isActive);

console.log(await page.hasLayout(window['powerbi-client'].models.LayoutType.MobilePortrait))
// true
  
console.log(await report.updateSettings({layoutType: window['powerbi-client'].models.LayoutType.MobilePortrait}))
// {statusCode: 202, headers: {…}, body: undefined}

It appears that PowerBi can see that there is a mobile layout for the active page, and the updateSettings commands executes without errors, but nothing happens.

I also tried embedding the report again, where I request the mobile layout upfront, this gives the same behaviour (only showing the desktop version).

I recognized that the powerbi client version that powewrapps portals uses is a bit old (version 2.6.5). Even though that we are running the latest version of the portal that are available to us (9.3.2205.12).

Question 1: How do we show the mobile version of the report in the portal?

Question 2: Is there a way to update the powerbi client in the portal?

Answer 1

First Question

you should note the following (from docs):

after the report initial load, changing to report mobile layout is supported only if mobile layout (portrait/landscape) has been set into the initial embedding configuration object. Otherwise, you must first call powerbi.reset(HTMLElement) to remove the iframe. Then, you have to call powerbi.embed(...) using the same container with the mobile layout setting defined on the embedded configuration object.

So basically, you are facing two options:

First Option - In your Configuration, use the following concept to control your visuals:

let models = window['powerbi-client'].models;
let embedConfig = {
    type: 'report',
    id: reportId,
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 1600,
                height: 1200
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

The second option - use the reset method:

powerbi.reset(HTMLElement)
powerbi.embed(...)

Second Question

I'm not sure that I understood your question correctly, but if I did - take a look here (https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/update-settings)