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

July 7 - July 17 | Round 2 of the Power BI Dataviz World Championships. Don't miss your chance! Learn more

Reply
NerdFlanders
Advocate I
Advocate I

Javascript toggle navigation bar

Hey,

 

I'm trying to embed a PowerBI report using the javascript api. The embedding itself already works fine, but how do i interact with the report now, for example toggle the visiblity of the navigation pane. 

This is the javascriptcode for the embedding:

 

var models = window['powerbi-client'].models;

var $staticReportContainer = $('#iFrameReport');
var staticReport;

 

var embedConfig = {

    type: 'report',
    embedUrl: 'https://app.powerbi.com/reportEmbed/',
    accessToken: document.getElementById('MainContent_accessToken').value,
    id: '2ce50ab9-.......-e871bbihb78b3',
}

staticReport = powerbi.embed($staticReportContainer.get(0), embedConfig);

 

So do I have to write now to turn the navigation pane on and off?

The sample on Github does not help.

 

Thank you!

1 ACCEPTED SOLUTION

@Eric_Zhang 

 

Thank you! I know this sample page, but i managed it to implement this function using this wiki

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Page-Navigation

 

View solution in original post

4 REPLIES 4
KumarDarmesh
Helper IV
Helper IV

What is the navigation panel, can you post a snapshot?

This navigation pane, or the filter pane, too.This navigation pane, or the filter pane, too.

@NerdFlanders

 

Have you checked this sample?
http://azure-samples.github.io/powerbi-angular-client/#/scenario6

 

It calls vm.toggleNavContentPaneClicked() function.

@Eric_Zhang 

 

Thank you! I know this sample page, but i managed it to implement this function using this wiki

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Page-Navigation

 

Helpful resources

Announcements
FabCon and SQLCon Barcelona 2026

FabCon & SQLCon – Barcelona 2026

Join us in Barcelona for FabCon and SQLCon, the Fabric, Power BI, SQL, and AI community event. Save €200 with code FABCMTY200.

60 days of Data Days Carousel

Data Days 2026

Join Fabric Data Days 2026: 60 days of free live/on-demand sessions, challenges, study groups, and certification opportunities.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Top Solution Authors