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?

Guy Nachshon · Answer 1 · 2022-06-30T07:02:11.377

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)

If I understands your config correctly, then you are still using the "desktop canvas", and just rearranging the visuals in code, correct? It's important for us that a none coder can go in and alter the mobile view (as referred to in your first doc link models.LayoutType.MobilePortrait) — Benjaco, Jun 28 '22 at 10:32
And your second link is missing. To elaborate a bit, the product we are using is https://powerapps.microsoft.com/en-gb/portals/ and it have its own way to include powerbi see https://learn.microsoft.com/en-us/power-apps/maker/portals/admin/set-up-power-bi-integration and https://learn.microsoft.com/en-us/power-apps/maker/portals/admin/add-powerbi-report — Benjaco, Jun 28 '22 at 10:36
@Benjaco I'm using the canvas you'll provide in your app. you can make your own ruleset in the config to determine when and how the display will change. I've added the link as plain text, for some weird reason it would work In any other way — Guy Nachshon, Jun 30 '22 at 07:06

Show mobile version of powerbi page in powerapps portals

1 Answers1

First Question

Second Question