Re: Integrate Power Bi DASHBOARD with AngularJS no...

Anonymous · ‎03-06-2017

Hello All,

I would like to know whether can we integrate power bi DASHBOARD into angualrjs web application.

Not the REPORT as shown here in this https://github.com/Microsoft/PowerBI-Angular.

I found something here https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-dashboard/.

I dont get what exactly they have explained.

Are they integrating Report or DASHBOAD?

Because in dashboard there are some very good features but not in report.when we publish to the web we can only publish a report not a dashboard.Here we cant customize the report as we do in DASHBOARD like moving tiles, removing the tiles that we dont want and Q&A.

Please suggest me.

Mohan.V

ervinaymishra · ‎01-30-2018

Hi All,

I am also facing problem when integrationg dashboard to angularjs application.While embeding in frame it display blank page but when integrating reports its working fine.Anyone know the solution please help with this.

The embed url and blank page screenshot attached

Eric_Zhang · ‎03-08-2017

@Anonymous

It is talking about integrating DASHBOARD.

I don't have much expertise on Angualrjs. I just modify the embed type and embed url from a sample of embedding report and it works. So to embed a DASHBOARD in Angualrjs, I think you can still follow the report Angualrjs sample in your post with the similar modification.

<html>

 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>

<script type="text/javascript">
window.onload = function () {
 
var embedConfiguration = {
    type: 'dashboard', // change report to dashboard
    accessToken: 'eyJ0eXAiOiYOUR-TOKEN-HERE-pgVRA',
//change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=f1f5155b-c6e2-4147-991b-28d914927d05'  
}; 

var $reportContainer = $('#dashboardContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
/*
			report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(JSON.stringify(data));
				alert(JSON.stringify(data));
            });
			*/
}

function reloadreport(){

var element = $('#dashboardContainer');

alert(element);
var report = powerbi.get(element);

report.reload().catch(error => {console.log(error)  });
};
</script> 
<div id="dashboardContainer"></div>

</html>

Anonymous · ‎03-13-2017

@Eric_Zhang

Thanks for reply

the script that u have mentioned

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>  
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js"></script>

is returning 404. we have changed the access token and embed the url but unble to see any output.

Please suggest .

Eric_Zhang · ‎03-13-2017

@Anonymous

Download the powerbi.js and put it in the same folder of the html page and change the lines to

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
 <script src="powerbi.js"></script>

Anonymous · ‎03-13-2017

@Eric_Zhang

Thanks for reply.

This is what we are trying get 401 response

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="powerbi.js"></script>

<script type="text/javascript">
window.onload = function () {

var embedConfiguration = {
    type: 'dashboard', // change report to dashboard
    accessToken: '__________________',
//change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=a3ee4a0b-7b09-42dc-977a-27f749377088'
};

var $reportContainer = $('#dashboardContainer');

var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

}

function reloadreport(){

var element = $('#dashboardContainer');

alert(element);
var report = powerbi.get(element);

report.reload().catch(error => {console.log(error) });
};
</script>
<div id="dashboardContainer"></div>

</html>

Please suggest were we are going wrong.

Eric_Zhang · ‎03-22-2017

@Anonymous

401 indicates a unauthorized error, is the token in your case valid? Below sample actually works. For testing purpose, you can get a valid token in a quick way. Just replace the token and dashboardid in your case.

<html>

  <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 embedConfiguration = {
    type: 'dashboard', // change report to dashboard
    accessToken: 'yourTokenHere',
//change report embed url to dashboard embed url
    embedUrl: 'https://app.powerbi.com/dashboardEmbed?dashboardId=yourdashboardid'  
}; 

var $reportContainer = $('#dashboardContainer');
 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
 
}
 
 
</script> 
<div id="dashboardContainer"></div>

</html>

Integrate Power Bi DASHBOARD with AngularJS not REPORT

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024