CODEWITHSUNDEEP
powerbipowerbi-embedded
SanjayD
SanjayD

Reputation: 166

Power BI Premium - embed using Power BI API and javascript not working like previous way

Earlier I used to use 'loadReport' from javascript which is not working with new PBI Premium, e.g. the below is not working anymore & it always says "This content isn't available". BTW this is still working for PBI embedded reports.

<html>
<body>
<iframe id="iFrameEmbedReport"></iframe>
</body>  
<script type="text/javascript">
window.onload = function () {
    var iframe = document.getElementById('iFrameEmbedReport');
        iframe.src = 'https://app.powerbi.com/reportEmbed?reportId=******-088f-4967-***-279bd5a**df&groupId=*****-****-4033-862d-1cd4f4fa72c1';
        iframe.onload = function() 
		{
			var m = {
				action: 'loadReport',
				accessToken: 'H4s*****'
			};
			message = JSON.stringify(m);
			iframe = document.getElementById('iFrameEmbedReport');
			iframe.contentWindow.postMessage(message, "*");
		};
};
</script>
</html>

But if we use powerbi.js with the same configs its working fine (below)

<html>
<body>
<div id="reportContainer"></div>
</body>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>  
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () { 
    var accessToken = '******************';
	var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=**********&groupId=**********';
	var embedReportId = '*****-088f-****-aa2d-279bd5a662df';
	var models = window['powerbi-client'].models;
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: models.Permissions.All,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
    };
	var reportContainer = $('#reportContainer')[0];
	var report = powerbi.embed(reportContainer, config);
}
</script>
</html>

Not able to figure out what has changed. I really don't want to include powerbi.js in my application if not needed. I know I have a working copy but really need to understand what has changed and if there is any way I can avoid powerbi.js. End goal is to use the first approach in UWP App.

Thanks

Upvotes: 2

Views: 1810

Answers (1)

RBreuer
RBreuer

Reputation: 1391

The main thing that's changed in the 2 approaches is the property TokenType.Embed which is not available in the 'old way', i.e. 'loadReport' message format.

This is a deprecated way of communicating with embedded entities from Power BI, and all users are encouraged to write their code against the new and maintained Javascript SDK: https://microsoft.github.io/PowerBI-JavaScript/

The 'loadReport' way work for backward compatibility concerns but you won't be able to write new code in new methods using this way.

Upvotes: 1

Related Questions