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

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! 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
Power BI DataViz World Championships

Power BI Dataviz World Championships

The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!

November Power BI Update Carousel

Power BI Monthly Update - November 2025

Check out the November 2025 Power BI update to learn about new features.

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.