Get certified for free when you join Fabric Data Days 2026 and dive into Fabric, Power BI, SQL, AI, and other essential data skills.
Join nowTry your skills in the Power BI Dataviz World Championship! Round one ends June 26. Join now
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