Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

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 Employee
Microsoft Employee

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
Sept PBI Carousel

Power BI Monthly Update - September 2024

Check out the September 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Sept NL Carousel

Fabric Community Update - September 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors