cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
nitin_sp
Regular Visitor

Report Embed in Phone Layout shows only middle part

Hi,

 

I am trying to use the mobile embed layout as explained here;

 

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile

 

Here is my config settings looks like for embed;

 

"{"tokenType":0,"accessToken":"<TOKEN>","permissions":7,"id":"211ff41e-e652-473a-9586-92d1f126ad99","embedUrl":"https://app.powerbi.com/reportEmbed?reportId=211ff41e-e652-473a-9586-92d1f126ad99","type":"report","pageName":"ReportSection","pageView":"oneColumn","settings":{"filterPaneEnabled":false,"navContentPaneEnabled":false,"layoutType":2}}"

 

The height and width of the embed div is: width: 724px; height: 407.25px;

 

I tried to change the height and width but that didnt matter much.

 

Here is a screenshot of the power BI desktop in Phone Layout:

 

Power BI Phone LayoutPower BI Phone Layout

 

And here is how it looks in page after embed with MobilePortraitLayout:

 

 

After embedAfter embed

 

Just want to understand whats wrong am I doing. I tried to play with the height / width to ensure thats not something wrong I am doing but that didn't help. 

 

Any help will be appreciated!

2 REPLIES 2
v-micsh-msft
Microsoft
Microsoft

The Layout have two values for the Mobile, make sure you configured it as MobilePortrait.

Code example:

var embedConfiguration = {
	type: 'report',
	id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
	embedUrl: 'https://app.powerbi.com/reportEmbed',
	tokenType: models.TokenType.Embed,
	accessToken: 'h4...rf',
	settings: {
            layoutType: models.LayoutType.MobilePortrait
        }
};

Regards,

Michael

Hi Michael,

 

Yes i do change the layout using following code;

 

	if (util.is.mobilePortrait()) {
				if (data.hasMobilePortraitLayout) {
					config.settings.layoutType = models.LayoutType.MobilePortrait;
					config.pageView = "oneColumn";
				}
			}

 

That code also executes before 

 

powerbi.embed(reportContainer, config);

 

I also thought pageView might help but it doesnt. So I tried with and without page view but no luck.

 

Seems some bug with embed API?

Helpful resources

Announcements
Join Arun Ulag at MPPC23

Join Arun Ulag at MPPC23

Get a sneak peek into this year's Power Platform Conference Keynote.

PBI Sept Update Carousel

Power BI September 2023 Update

Take a look at the September 2023 Power BI update to learn more.

Learn Live

Learn Live: Event Series

Join Microsoft Reactor and learn from developers.

Dashboard in a day with date

Exclusive opportunity for Women!

Join us for a free, hands-on Microsoft workshop led by women trainers for women where you will learn how to build a Dashboard in a Day!