Integrating Power BI into Azure Web App
Power BI is a great data visualisation tool, which makes it easy to get insights from the raw data. The new functionality from Microsoft to integrate power bi into a web app makes it even more useful. In this blog I will show you how to embedded Power BI report into an Azure Web app.
How Is Embedding Power BI Into Web App Useful?
- Gives you one point solution: If you are a decision maker of a company then you like to have a integrated view of your sales, marketing campaing, your expenses etc, Power BI does the same and with its embedding feature gets that onto your own website.
- Convenient for your clients : Since Power BI has row level security feature, you can share the reports of respective clients on your website without rendering to any third party solution.
What All Is Needed?
- You need a Azure Subscription
- Power BI desktop application
- Power BI service account
- Visual Studio
- I assume that the Power BI Report is ready and is published to the Power BI Service account from your Power BI Desktop.
Following Are The Steps To Embed Power BI Reports:
Register Your App
- This step creates client ID and client secret for the API you select
- Go to dev.powerbi.com/apps, sign-in with your Power BI service account. After successful login your name will appear on the screen, for me it shows “Swapnil Jadhav”. In Step 2 box fill in the details of your app.
- App Name : should be relevant to your app, for example : mine is a survey app.
- App Type : server-side Web app since its a web application.
- RedirectURL : it is the page which is rendered after authentication, I have set the page on which my power bi report will be embedded.
- Home Page URL : this is the home page of your app.
- In step 3 set the access level, for example I want to embed reports, so I will select “Read all Reports” check box.
- Click on Register App to generate the Client ID and Client Secret. Keep a record of the ID and Secret and do not share it with anyone else.
Open Your Application In Visual Studio
- I have created a azure web app with local url : https://localhost:44563, I will open this app into visual studio.
- As shown below you need to insert the xml code in the Web.config, under applicationSetting tag. Following is the code
<applicationSettings><SurveyApplication.Properties.Settings><setting name="PowerBiAPI" serializeAs="String"><value>https://analysis.windows.net/powerbi/api</value></setting><setting name="AADAuthorityUri" serializeAs="String"><value>https://login.windows.net/common/oauth2/authorize/</value></setting><setting name="PowerBiDataset" serializeAs="String"><value>https://api.powerbi.com/v1.0/myorg/</value></setting><setting name="RedirectUrl" serializeAs="String"><value>https://localhost:44563/PowerBIEmbed/</value></setting><setting name="ClientID" serializeAs="String"><value>xxxxxxxxx-xxxx-xxxx-xxxxx-xxxxxxxxxxxxx</value></setting><setting name="ClientSecret" serializeAs="String"><value>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</value></setting></SurveyApplication.Properties.Settings></applicationSettings> - Instead of SurveyApplication mention the name of your application.
- Change the RedirectUrl to the url of your application page which you have given in the above steps.
- Mention the ClientID and ClientSecret you generated in the above steps and save the web.config file.
- Microsoft has an demo application for Integrating Power BI, the code needed for the controller can be referred from this project. Link to the project is given below:
https://github.com/Microsoft/PowerBI-Developer-Samples/tree/master/User%20Owns%20Data/integrate-report-web-app - I have created a MVC app so the code for the view is as mentioned below. I have mentioned the view code since the code in the above project was not working for me.
<head><script type="text/javascript">window.onload = function () {if ("" != "[accessToken]") @*[accessToken] is a place holder for variable containing access token*@{var iframe = document.getElementById('iFrameEmbedReport'); @*iFrameEmbedReport is the html iFrame id in which will show the power bi report*@iframe.src = "[embedURL]"; @* [embedURL] is the place holder for variable containing embed url of the power bi report*@iframe.onload = postActionLoadReport;}};function postActionLoadReport() {var m = {action: "loadReport",accessToken: "[accessToken]", @* [accessToken] is a place holder for variable containing access token*@settings: {filterPaneEnabled: false,navContentPaneEnabled: false}};message = JSON.stringify(m);// push the message.iframe = document.getElementById('iFrameEmbedReport');iframe.contentWindow.postMessage(message, "*");;iframe.setFilters([filter]).then(function (result) {Log.log(result);}).catch(function (errors) {Log.log(errors);});}</script></head>@using (Html.BeginForm()){<h2>Power BI Reports</h2><div><br /><iframe id="iFrameEmbedReport" style="width: 1100px; height: 600px; border:hidden" seamless></iframe></div>} - You would need the three javascript files powerbi.js, powerbi.js.map and powerbi.min.js, these files can be copied from the microsoft demo app.
- Once the project is ready you can run it and power bi report will be loaded.
This blog is also published on Voksedigital website
Thank you so much it is actually a very nice blog written to provide adequate information about Power BI and its related aspects.
ReplyDeletePowerbi Read Soap