Join us at FabCon Atlanta from March 16 - 20, 2026, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.
Register now!The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now! Learn more
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!
Solved! Go to Solution.
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
What is the navigation panel, can you post a snapshot?
This navigation pane, or the filter pane, too.
Have you checked this sample?
http://azure-samples.github.io/powerbi-angular-client/#/scenario6
It calls vm.toggleNavContentPaneClicked() function.
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
The Power BI Data Visualization World Championships is back! Get ahead of the game and start preparing now!
Check out the November 2025 Power BI update to learn about new features.
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 1 | |
| 1 |
| User | Count |
|---|---|
| 11 | |
| 8 | |
| 4 | |
| 3 | |
| 3 |