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 dashboard rendering with the list of dashboards available in your Bold BI server and followed by steps to create new embedding application in the ASP.NET Web Forms on your own.

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

How to run the sample

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

2. You need to set your embed property details in the EmbedProperties.cs and Site.Master as follows.
   

   UserEmail	UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list
   EmbedSecret	You could get your EmbedSecret key from Embed tab by enabling Enable embed authentication in Administration page
   rootUrl	Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
   siteIdentifier	For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string.
   environment	Your Bold BI application environment. (If Cloud, you should use cloud, if Enterprise, you should use enterprise)
   DashboardId	Set the item id of the dashboard to embed from BI server.

3. Run your ASP.NET Web Forms sample.

4. The dashboard can be rendered in design mode or created with the following changes in the Init() method.

   <script type="text/javascript">
       var dashboardId = "db8d3eb2-a608-4ffd-9aad-cd51278e1531";
       function Init() {
           this.dashboard = BoldBI.create({
               serverUrl: "http://localhost:12345/bi/site/site1",
               dashboardId: dashboardId, //Provide item id to render it in design mode,to create dashboard remove this property
               embedContainerId: "dashboard",
               embedType: BoldBI.EmbedType.Component,
               environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
               mode: BoldBI.Mode.Design
               width: "100%",
               height: "100%",
               expirationTime: 100000,
               authorizationServer: {
                   url: "Default.aspx/GetEmbedDetails"
               }
               
           });
           this.dashboard.loadDesigner();
       }
   </script>

   serverUrl	Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)
   dashboardId	Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard.
   embedContainerId	Container Id in which dashboard renders.It should not contain hypen.
   mode	In which mode you want to render dashboard. It can either be 'View' or 'Design' mode.
   expirationTime	Set the duration for the token to be alive.
   authorizationServer	Url of the 'GetEmbedDetails' action in the application.

How this sample works

1. Based on the provided embed details with the dashboard, authorize the server URL by calling the GetEmbedDetails function, (Default.aspx/GetEmbedDetails)call, and the provided EmbedProperties values. Learn more about authorize server here

2. In the above authorization, the SignatureUrl is generated with the provided EmbedSecret key and validated embed details in Bold BI. Once details are validated, the dashboard starts to render.

3. In the Site.Master, change the dashboard Id of the respective dashboard as you wish to embed.

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

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

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

3. Change the project name as you want, then click Create.

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

5. Under the model folder, create the EmbedProperties.cs class to define the mandatory properties as follows.

   public class EmbedProperties
   {
      //Enter your BoldBI credentials here.
       public static string UserEmail = "";
   
       // Get the embedSecret key from Bold BI, please refer this link(https://help.syncfusion.com/bold-bi/on-premise/site-settings/embed-settings)
       public static string EmbedSecret = "";
   }

6. Open the Default.aspx.cs implement an API GetEmbedDetails(), which invokes the GetSignatureUrl() method as follows.

   [WebMethod()]
      public static void GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
      {
          embedQuerString += "&embed_user_email=" + EmbedProperties.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 System.Net.Http.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(EmbedProperties.EmbedSecret);
          var messageBytes = encoding.GetBytes(message);
          using (var hmacsha1 = new HMACSHA256(keyBytes))
          {
              var hashMessage = hmacsha1.ComputeHash(messageBytes);
              return Convert.ToBase64String(hashMessage);
          }
      }

   In this API, the embedQuerString,userEmail and the value from the GetSignatureUrl() method are appended as query parameters in the URL to get details of a particular dashboard from the server.

7. In the Site.Master, refer to the following file, which is mandatory to render the dashboard.

   <script src="https://cdn.boldbi.com/embedded-sdk/v6.8.9/boldbi-embed.js"></script>

8. In the <body> section, initialize the method as Init() and remove the existing header container. In the <script>tag, implement its functionality as follows.

      <script type="text/javascript">
          var dashboardId = "db8d3eb2-a608-4ffd-9aad-cd51278e1531";
          function Init() {
              this.dashboard = BoldBI.create({
                  serverUrl: "http://localhost:12345/bi/site/site1", //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
                  dashboardId: dashboardId, //Dashboard id of the dashboard you want to embed here.
                  embedContainerId: "dashboard", //DOM id where the dashboard will be rendered, here it is dashboard.
                  embedType: BoldBI.EmbedType.Component,
                  environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
                  mode: BoldBI.Mode.View,
                  width: "100%",
                  height: "100%",
                  expirationTime: 100000, //Set the duration for the token to be alive.
                  authorizationServer: {
                      url: "Default.aspx/GetEmbedDetails" //URL from which particular dashboard details is obtained from server.
                  }
              });
              this.dashboard.loadDashboard();
          }
      </script>