Monday, April 04, 2016

Integrate a Power BI report into an app

Hi All,

This blog post is a walk through article on how to embed a PowerBI report in an application. This blog post with source code is available in GitHub.

I can say this feature is one of the most requested features from clients i worked with directly.
Below is a screen shot of the running application i have created that contains an integrated PowerBI report i have created in Office 365 tenant using PowerBI.


How to run the application:

1) Register your application in Azure AD, here are the configurations we need to update ASP.NET MVC app:

  • Client Id
  • Secret Id
  • Return Url: If you want to change it from the original app code.
Below screen shots show Azure AD (AAD) app registration settings in Azure portal:





2) Login to your PowerBI (app.powerbi.com) and get the Report Id you want to embed in the app:

Select a report that you would like to embed, grab a report Id from the browser url.
Below screen show shows a selected report "RPT1" and highlighted ReportId we will embed in our app.




3) Open ASP.NET MVC Project settings in VS 2015 and update Client Id and Secret Id from Azure Portal after registering your app.



4) Open index.cshtml and update iframe src attribute by adding the Report Id we captured in step #2.

 <iframe ID="iFrameEmbedReport" src="https://app.powerbi.com/reportEmbed?reportId=11156ed2-ede7-4b60-ac26-10cda004bdee" height="768px" width="1024px" frameborder="1" seamless></iframe>
 5) Run the app, Click on o365 login, Sign In and then PowerBI report will be showing after your login to the app.


Demo source code url: https://github.com/melzoghbi/PowerBIEmbeddedApp


References:
1) Integrate a Power BI tile or report into an app

2) Power BI Embedded home page:
https://azure.microsoft.com/en-us/services/power-bi-embedded/

Enjoy!
Post a Comment