Power BI Embedded using Web Forms and Row Level Security

If you are looking for a way to spice up your old Web Form application, consider adding the power of Power BI embedded. Today I will show you the specific steps needed to add a Power BI Report to a custom Web Forms application using the Microsoft Power BI Embedded Service. This blog is a follow up to my Row Level Security with Power BI Embedded using MVC blog as the Power BI Report, row level security and Azure setup is the exact same.

Please refer to the Row Level Security with Power BI Embedded using MVC blog post for the non web form specific steps.

Before you start, you will need a number of items.
1) A Power BI report created using Direct Query
2) A subscription to Microsoft Azure
3) Microsoft’s Provision Sample application
4) A web form application in Visual Studio
5) The appropriate NuGet packages
6) Read the MVC blog post before going further

Azure Power BI Embedded service and Web Forms.

Microsoft provides a sample Web Form application via Mostafa Elzoghbi and Channel 9 at Power BI Embedded Explained – Part 4. This video is where I started and is a useful refresher as you start your Web Form application.

Just like the MVC application, first you need to provide the Azure information you collected to your application. With your reports uploaded to Azure you will also need to use the Microsoft sample application or create a custom call in your application to get your Report IDs, this can be done via Reports.GetReports from the IPowerBIClient interface. Once you have the needed Report IDs you can store them along with the rest of your Azure information via a database or the Webconfig, the webconfig method is show below.

Don’t forget to add your NuGet packages, just like the MVC application you will need those:

Install-Package Microsoft.PowerBI.Core 
Install-Package Microsoft.PowerBI.API 
Install-Package Microsoft.PowerBI.JavaScript 
Install-Package Newtonsoft.Json 
Install-Package Microsoft.Rest.ClientRuntime

Web.config

<appSettings>
    <add key="powerbi:AccessKey" value="" /> //One of your two access keys
    <add key="powerbi:ApiUrl" value="https://api.powerbi.com" />
    <add key="powerbi:WorkspaceCollection" value="" /> //Workspace collection name
    <add key="powerbi:WorkspaceId" value="" /> //Workspace id
    <add key="powerbi:ReportMain" value="" /> //Report id one
    <add key="powerbi:ReportRole" value="" /> //Report id two
</appSettings>

It is possible to store all the logic for your reports in a single aspx page and code behind or you can create a set of pages for each report. Either way you will need to create a PowerBI object via the IPowerBIClient interface and use the Page_Load method to control adding the report to the page.

First, setup your page to accept the Power BI report by adding two hidden inputs, an iframe and a javascript function:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <input type="hidden" id="accessTokenText" runat="server" value="" />
    <input type="hidden" id="embedUrlText" runat="server" value="" />

    <iframe ID="iFrameEmbedReport"  height="768" width="1024" seamless></iframe> 

    <!-- Js function to assign iframe embedUrl and access token -->
    <script type="text/javascript">

         window.onload = function ()
            { // find the iFrame on the page and handle the loaded event.
              var iframe = document.getElementById('iFrameEmbedReport');
              iframe.src = document.getElementById('MainContent_embedUrlText').value;  //embedReportUrl;
              iframe.onload = postActionLoadReport;
              // post the access token to the iFrame to load the tile
              function postActionLoadReport() {
                  // get the app token.
                  accessToken = document.getElementById('MainContent_accessTokenText').value;//{generate app token};
                  // construct the push message structure
                  var m = { action: "loadReport", accessToken: accessToken };
                  message = JSON.stringify(m);
                  // push the message.
                  iframe = document.getElementById('iFrameEmbedReport');
                  iframe.contentWindow.postMessage(message, "*");
                  }
              };
    </script>
</asp:Content>

Then make sure your code behind has the following using directives:

using System;
using System.Collections.Generic;
using System.Web.UI;
using Microsoft.PowerBI.Api.V1;
using Microsoft.PowerBI.Security;
using System.Configuration;
using Microsoft.Rest;

Now add the following code to your page’s class:

        private static string ReportID = ConfigurationManager.AppSettings["powerbi:ReportRole"];
        private static string workspaceCollection = ConfigurationManager.AppSettings["powerbi:WorkspaceCollection"];
        private static string workspaceId = ConfigurationManager.AppSettings["powerbi:WorkspaceId"];
        private static string accessKey = ConfigurationManager.AppSettings["powerbi:AccessKey"];
        private static string apiUrl = ConfigurationManager.AppSettings["powerbi:ApiUrl"];

        private IPowerBIClient CreatePowerBIClient()
        { 
            var credentials = new TokenCredentials(accessKey, "AppKey");

            var client = new PowerBIClient(credentials)

            {

                BaseUri = new Uri(apiUrl)

            };

            return client;
        }
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {

                using (var client = this.CreatePowerBIClient())
                {

                    string myUserID = User.Identity.Name.ToString();
                    IEnumerable<string> myRole = new List<string>() { "Customer", "Developer" };
                    var embedToken = (myUserID == "") ? PowerBIToken.CreateReportEmbedToken(workspaceCollection, workspaceId, ReportID) : PowerBIToken.CreateReportEmbedToken(workspaceCollection, workspaceId, ReportID, myUserID, myRole);
                    string myTok = embedToken.Generate(accessKey);

                    accessTokenText.Value = myTok;  //input on the report page.

                    embedUrlText.Value = "https://embedded.powerbi.com/appTokenReportEmbed?reportId=" + ReportID; //input on the report page.

                }
            }
        }

That is it, call your page and your embedded report should load.