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.
• Convinient 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 the below image. In Step 2 box fill in the details of your app as shown in below image.
  • App Name : should be relevant to your app, for ex 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.
    [showhide type=”post” more_text=”Code here” less_text=”Hide 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>699f4aa1-4b98-447a-bd6f-xxxxxxxxxxxxx</value>
    </setting>
    <setting name=”ClientSecret” serializeAs=”String”>
    <value>QYJ6XlGmtXsR0LuMjxxxxxxxxxxxxxxxxxxxx</value>
    </setting>
    </SurveyApplication.Properties.Settings>
    </applicationSettings>
    [/showhide]
  • 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 reffered 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.
    [showhide type=”post” more_text=”Code here” less_text=”Hide code” ]
    <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>
    }

    [/showhide]
  • 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.

Blog disclaimer:
This is a professional weblog, and we have invited experts to share their thoughts, expertise , perspectives and knowledge. The opinions expressed here are purely representing their personal views and not those of any institution, employer or company.