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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
coriben
Helper I
Helper I

Mobile view of embedded report not showing navigation pane

Hello there. 

 

I'm using the Javascript API to embed a report to our site. We have the Embedded license. Here's the code I'm using to dinamically load the mobile layout of the report based on some conditions:

 

 

		var config= {
			type: this.embedType,
			tokenType: this.tokenType,
			accessToken: this.txtAccessToken,
			embedUrl: 'https://app.powerbi.com/'+ this.embedType +'Embed?'+ this.embedType +'Id=' + 	this.txtEmbedReportId + '&groupId=ommitedForPrivacy',
			id: this.txtEmbedReportId,
			permissions: this.permissions,
			pageView: null,
			settings: {
				filterPaneEnabled: false,
				navContentPaneEnabled: true,
				layoutType: null
			}
		};

		if (touch === true && portrait === true) {

			config.pageView = "oneColumn";
			config.settings.layoutType = this.models.LayoutType.MobilePortrait;

		} else if (touch === true && portrait === false) {

			config.pageView = "oneColumn";
			config.settings.layoutType = this.models.LayoutType.MobileLandscape;
		}

		// Embed the report and display it within the div container.
		this.report = powerbi.embed(this.embedContainer.get(0), config);

 

The code is working, and the site correctly renders the mobile layout on mobile devices. The problem is that:

- The rendered mobile layout is completely different from the development version that is showed to you in Power BI Desktop (way uglier, everything is out of place);

- There is no navigation pane.

 

Is this the intended functionality? No navigation pane in mobile layout? As you can see, the navContentPaneEnabled parameter is explicitly set to true in the code, so that's not it.

 

Thanks!

 

2 REPLIES 2
coriben
Helper I
Helper I

For future readers:

 

The Javascript API expects you to handle mobile navigation programatically, as per the docs. So I made a little plugin to handle that. You can find it here

 

Hope it helps.

Sorry for a question,
I have my app in python, could I add this plugin? I understand that I should modify something in my index.js (where I create the embedding)?
I don't really understand how it works but I would love to add it to the project I have.
Thank you.

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

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