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

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!

 

1 REPLY 1
coriben Regular Visitor
Regular Visitor

Re: Mobile view of embedded report not showing navigation pane

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.