Bold BI Dashboards embedding in ASP.NET Web Forms using Embedded SDK

A GitHub link has been provided to get the sample application, which demonstrates the rendering of the dashboard available on your Bold BI server. This is followed by steps to create a new embedding application in ASP.NET Web Forms on your own.

NOTE: The best way to get started would be to read the Getting Started section of the documentation first. The Getting Started guide provides you with enough information that you need to know before working on the sample.

Prerequisites

• Visual Studio 2022
• .NET Framework 4.8

How to run the sample

1. Please get the ASP.NET Web Forms sample from GitHub.

2. Please ensure that you have enabled embed authentication on the embed settings page. If it is not enabled, please refer to the following image or detailed instructions to enable it.

   

3. To download the embedConfig.json file, please follow this link for reference. Furthermore, you may refer to the accompanying image for visual guidance.

   

4. Please copy the downloaded embedConfig.json file and paste it into the designated location within the application. Please make sure that you have placed it in the application, as shown in the following image.

   

   ServerUrl	Dashboard Server BI URL (ex: http://localhost:5000/bi, https://demo.boldbi.com/bi)
   SiteIdentifier	For the Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be an empty string.
   UserEmail	UserEmail of the Admin in your Bold BI, which would be used to get the dashboard list.
   EmbedSecret	Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page
   Environment	Your Bold BI application environment. (If it is a cloud analytics server, use BoldBI.Environment.Cloud; if it is your server, use BoldBI.Environment.Enterprise)
   DashboardId	Item ID of the dashboard to be embedded in your application.
   ExpirationTime	Token expiration time. (In the EmbedConfig.json file, the default token expiration time is 10000 seconds)

5. Run your ASP.NET Web Forms sample in Visual Studio.

   NOTE: If you are facing an error related to the bin\roslyn\csc.ex, it indicates that performing a clean build and rebuild is necessary.

How this sample works

1. The application checks if the embedConfig.json is available; if so, it deserializes and stores the content in EmbedDetails. Otherwise, it throws an error.

   

2. To generate an access token, call the TokenGeneration API with the provided embedConfig values.

   

3. Once the token is generated, it will be returned to the Site.Master file and the dashboard will start to render it.

   

Steps to create new ASP.NET Web Forms application to embed dashboard

1. Start Visual Studio and click Create a new project.

2. Choose the ASP.NET Web Application (.NET Framework), and then click Next.

   

3. Change the project name as you desire, and then click on Create.

4. Choose Web Forms and Web API, and then click Create.

   

5. Please ensure that you have enabled embed authentication on the embed settings page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.

6. To download the embedConfig.json, please follow this link for reference. Furthermore, you can refer to the accompanying image for visual guidance.

   

7. Please copy the downloaded embedConfig.json file and paste it into the designated location within the application. Please make sure that you have correctly placed it in the application, as demonstrated in the image below.

   

8. Create the EmbedClass.cs class within the models folder. This class should define specific properties that are used to retrieve dashboard details from the server. Make sure to include the System.Runtime.Serialization and System namespaces in the EmbedClass.cs model file.

   public class EmbedClass
   {
       [DataMember]
       public string embedQuerString { get; set; }
       [DataMember]
       public string dashboardServerApiUrl { get; set; }
   }
   
   public class EmbedDetails
   {
       public string Environment { get; set; }
   
       public string SiteIdentifier { get; set; }
   
       public string ServerUrl { get; set; }
   
       public string EmbedSecret { get; set; }
   
       public string UserEmail { get; set; }
   
       public string EmbedType { get; set; }
   
       public string DashboardId { get; set; }
   }

9. Please create a new model class called GlobalAppSettings.cs to define the following properties. These properties will store the embedConfig.json file object within the GlobalAppSettings.

   public class GlobalAppSettings
   {
      public static EmbedDetails EmbedDetails { get; set; }
   }

10. Please open the Default.aspx file and replace the code in the <asp:Content> section with the following. This container is used to render the dashboard.

    <div id="viewer-section">
       <div id="dashboard"></div>
    </div>

11. In Default.aspx.cs, to retrieve specific dashboard details, you need to define an API called AuthorizationServer(). This API utilizes the GetSignatureUrl() method to generate the algorithm. Within this API, the embedQueryString, userEmail, and the value obtained from the GetSignatureUrl() method are appended as query parameters in the URL, enabling the retrieval of the desired dashboard details.

       [WebMethod()]
       public static void AuthorizationServer(string embedQuerString, string dashboardServerApiUrl)
       {
           embedQuerString += "&embed_user_email=" + GlobalAppSettings.EmbedDetails.UserEmail;
           //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
           double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
           embedQuerString += "&embed_server_timestamp=" + timeStamp;
           var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);
    
           using (var client = new HttpClient())
           {
               client.BaseAddress = new Uri(dashboardServerApiUrl);
               client.DefaultRequestHeaders.Accept.Clear();
    
               var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
               string resultContent = result.Content.ReadAsStringAsync().Result;
               //return resultContent;
               var js = new System.Web.Script.Serialization.JavaScriptSerializer();
    
               HttpContext.Current.Response.Clear();
               HttpContext.Current.Response.ContentType = "application/json; charset=utf-8";
               HttpContext.Current.Response.Write(js.Serialize(resultContent));
               HttpContext.Current.Response.Flush();
               HttpContext.Current.Response.End();
           }
       }
    
       public static string GetSignatureUrl(string message)
       {
           var encoding = new System.Text.UTF8Encoding();
           var keyBytes = encoding.GetBytes(GlobalAppSettings.EmbedDetails.EmbedSecret);
           var messageBytes = encoding.GetBytes(message);
           using (var hmacsha1 = new HMACSHA256(keyBytes))
           {
               var hashMessage = hmacsha1.ComputeHash(messageBytes);
               return Convert.ToBase64String(hashMessage);
           }
       }

12. The following script is necessary to display the dashboard. Insert the provided code into the Site.Master page within the <head> section.

       <script src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
       <script type="text/javascript">
           var rootUrl = "<%= <your project name>.Models.GlobalAppSettings.EmbedDetails.ServerUrl %>";
           var dashboardId = "<%= <your project name>.Models.GlobalAppSettings.EmbedDetails.DashboardId %>";
           var siteIdentifier = "<%= <your project name>.Models.GlobalAppSettings.EmbedDetails.SiteIdentifier %>";
           var environment = "<%= <your project name>.Models.GlobalAppSettings.EmbedDetails.Environment %>";
           var embedType = "<%= <your project name>.Models.GlobalAppSettings.EmbedDetails.EmbedType %>";
    
           function Init() {
               this.dashboard = BoldBI.create({
                   serverUrl: rootUrl + "/" + siteIdentifier,
                   dashboardId: dashboardId,
                   embedContainerId: "dashboard",
                   embedType: embedType,
                   environment: environment,
                   width: "100%",
                   height: "100%",
                   expirationTime: 100000,
                   authorizationServer: {
                       url: "Default.aspx/AuthorizationServer"
                   }
               });
               this.dashboard.loadDashboard();
           }
       </script>

    NOTE: Change <your project name> to the name of your project.

13. In the <body> section, include the following code, which is used to initialize the method Init().

    <body onload="Init()">
       <form runat="server" style="height: 100%">
           <div class="container body-content" style="height: 100%">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
               </asp:ContentPlaceHolder>
           </div>
       </form>
    </body>

14. Open the Global.asax.cs file and include the code sample provided below.

       RouteConfig.RegisterRoutes(RouteTable.Routes);
       string embedConfigPath = Server.MapPath("~/embedConfig.json");
       string jsonString = System.IO.File.ReadAllText(embedConfigPath);
       GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);

15. Please rewrite the code in the RouteConfig.cs file, which is located in the App_Start folder.

     var settings = new FriendlyUrlSettings();
     settings.AutoRedirectMode = RedirectMode.Off;
     routes.EnableFriendlyUrls(settings);

16. Please run your ASP.NET Web Forms sample in Visual Studio.