You attempted to get an instance of powerbi compon...

inguvavamsi_1 · ‎11-30-2021

Hi All,

I am getting the below error when i try to use Power BI JS to hide some pages and filters of power bi report in power app portals.

The report is displaying perfectly but the javascript is not working and giving error in console.

Uncaught Error: You attempted to get an instance of powerbi component associated with element

title="Power BI report"></iframe> but there was no associated instance.

Below is my code

{% assign forums_sm = sitemarkers["Forums"] %}

<html>

{% powerbi authentication_type:"AAD" path:"MyPowerBIURL" %}

</html>

// get reference to the embedded report
var report = powerbi.get(embedContainer);

// register a function to execute when report will finish loading
report.on("loaded", function(){
// update existing setting of the reports
// you can disable only one page or both at the same time
report.updateSettings({
panes: {
filters :{
visible: false
},
pageNavigation:{
visible: false
}
}
}).catch(function (errors) {
console.log(errors);
});
})
});
</script>

Please help how i can get ride of this error.

I exactly followed same steps mentioned in msdn link. Please see link here

https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/add-powerbi-report

Thank you

inguvavamsi_1 · ‎12-06-2021

Hi Jay,

The initial issue got resolved. There are two reasons for the issue

The Liquid Tag

{% powerbi authentication_type:"AAD" path:"MyPowerBIURL" %}

Should be

{% powerbi authentication_type:"powerbiembedded " path:"MyPowerBIURL" %}

This should be powerbiembedded otherwise the javascript will not able to findout the powerbi iframe

The second issue is the power app portals is not loading the latest powerbi js that comes with portal. Hence, i am referring the script again to get latest libraries using below codeset

var script = document.createElement('script');

script.src=file;

script.type = 'text/javascript';

script.defer = true;

document.getElementsByTagName('head').item(0).appendChild(script);

}

include('https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.18.0/powerbi.js');

However, the position: models.PageNavigationPosition.Left still not working and the pages are placed below the report not on the leftside