Bold BI Dashboards Embedding in ASP.NET MVC Sample with Embedded SDK

A GitHub link has been provided to get obtain the sample application. This application demonstrates dashboard rendering with a list of dashboards available in your Bold BI server. It is then followed by steps to create a new embedding application in ASP.NET MVC 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

How to run the sample

Please get the ASP.NET MVC sample from GitHub.
Please make sure that you have enabled embed authentication on the embed settings settings page. If it is not currently enabled, please refer to the provided image or detailed instructions to enable it, using a concise number of words.
To download the embedConfig.json file, please click on the following link for reference. Additionally, you can refer to the image below for visual guidance.

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

EmbedConfig image

ServerUrl	Dashboard Server BI URL (ex: http://localhost:5000/bi, https://demo.boldbi.com/bi)
SiteIdentifier	For 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 dashboards 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 cloud analytics server, use `BoldBI.Environment.Cloud`; if it is your own 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)

Please run your ASP.NET MVC sample in Visual Studio.

NOTE: If you encounter an error with bin\roslyn\csc.ex, it means that you need to perform a clean clean build and rebuild.

The dashboard can be edited in the design mode and create a new dashboard with the following changes in the renderDashboard() method.

dashboardId	Provide the dashboard id of the dashboard you want to embed in view or edit mode. This property no need to create a new dashboard.
mode	In which mode you want to render dashboard. It can either be 'BoldBI.Mode.View' or 'BoldBI.Mode.Design' mode.
authorizationServer	Url of the 'authorizationServerAPI' action in the application.

   function renderDashboard(dashboardId) {
      var dashboard = BoldBI.create({
          serverUrl: rootUrl + "/" + siteIdentifier,
          dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property   
          embedContainerId: "dashboard",
          embedType: embedType,
          environment: environment, // If Cloud, you should use BoldBI.Environment.Cloud
          width: "100%",
          height: "100%",
          mode: BoldBI.Mode.Design,
          expirationTime: 100000,
          authorizationServer: {
              url: authorizationServerUrl
          }
      });
      dashboard.loadDesigner();
  };

NOTE: By default, we display the dashboard embedding without the dashboard listing sidebar. To access the dashboard list, you need to navigate to the dashboardlisting URL (e.g., https://localhost:44382/home/dashboardlisting).

How this sample works

Based on the values in the embedConfig.json file, you will retrieve the user token and validate it. After that, you can obtain the dashboard list from the server.
In HomeController.csfile, we have added the GetToken() method and GetDashboards() action, which are called when initializing the DOM in Index.html.
When choosing the dashboard to display, authorize the server URL by making a call to the AuthorizationServer action using the values provided in the embedConfig.json file.
In the above authorization, we generated the SignatureUrl using the provided EmbedSecret key and validated the embed details in Bold BI. Only then, the dashboard will be rendered in the viewer section of Index.cshtml.

Steps to create new ASP.NET MVC application to embed dashboard

To begin, open Visual Studio and select Create new project.
Next, choose ASP.NET Web Application (.NET Framework) and click Next.
Please feel free to change the project name as desired, and then click on the Create button.
Please select MVC and Web API, and then click OK.
Please make sure that you have enabled embed authentication on the embed embed settings page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.
To download the embedConfig.json file, please click on the following link for reference. Additionally, you can refer to the accompanying image for visual guidance.
Please copy the downloaded embedConfig.json file and paste it into the designated location within the application. Please make sure you have placed it in the application, as shown in the image below.

Create a model class called ApiResponse.cs to define the properties of the API response, as shown below. Make sure to include the System.Runtime.Serialization and System namespaces in the ApiResponse.cs model file.

    [Serializable]
    [DataContract]
    public class ApiResponse
    {
        /// <summary>
        /// Returns the status of the API.
        /// </summary>
        [DataMember]
        public bool ApiStatus
        {
            get;
            set;
        }

        /// <summary>
        /// Returns data from the API.
        /// </summary>
        [DataMember]
        public object Data
        {
            get;
            set;
        }

        /// <summary>
        /// Returns status of the API request.
        /// </summary>
        [DataMember]
        public bool Status
        {
            get;
            set;
        }

        /// <summary>
        /// Returns the status message from the API.
        /// </summary>
        [DataMember]
        public string StatusMessage
        {
            get;
            set;
        }

        /// <summary>
        /// Returns the message from the API.
        /// </summary>
        [DataMember]
        public string Message
        {
            get;
            set;
        }
   }

Please create another model class named DataClass.cs to define the following properties. These properties will be used to retrieve the dashboard details from the server. Please make sure to include the System.Runtime.Serialization namespace in the DataClass.cs model file.

    [DataContract]
    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; }
    }

Please create another model class called GlobalAppSettings.cs. This class will define the following properties that will maintain the embedConfig.json file object within the GlobalAppSettings. Make sure to include the static static BoldBI.Embed.Sample.Models.DataClass namespace in the GlobalAppSettings.cs model file.
```
   public class GlobalAppSettings
   {
      public static EmbedDetails EmbedDetails { get; set; }
   }
```

The following script is necessary to display the dashboard. Set the Layout = null at the top and replace the code below in the <head> tag of your \Views\Home\Index.cshtml page. Make sure the Models folder is included in the namespaces.

Index.cshml location

    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v7.7.9/boldbi-embed.js"></script>
    <link rel="stylesheet" href="~/Content/Site.css" />
    <script type="text/javascript" src="~/Scripts/Embed/Index.js"></script>
    <script type="text/javascript">
     var rootUrl = "@GlobalAppSettings.EmbedDetails.ServerUrl";
     var dashboardId = "@GlobalAppSettings.EmbedDetails.DashboardId";
     var siteIdentifier = "@GlobalAppSettings.EmbedDetails.SiteIdentifier";
     var environment = "@GlobalAppSettings.EmbedDetails.Environment";
     var embedType = "@GlobalAppSettings.EmbedDetails.EmbedType";
     var authorizationServerUrl = "@Url.Action("AuthorizationServer", "Home")";
    </script>

In the <body> section, include the <div id="viewer-section"> with a <div id="dashboard"> inside it. This container can be used to display the dashboard.

    <body onload="renderDashboard(dashboardId)">
    <div id="viewer-section">
      <div id="dashboard"></div>
    </div>
    </body>

To obtain specific dashboard details in the Controllers\HomeController.cs, an API AuthorizationServer() needs to be defined. This API will utilize the GetSignatureUrl() method to generate the algorithm. The embedQuerString,userEmail and the value from the GetSignatureUrl() method should be added as query parameters in the URL to fetch the desired dashboard details. Please make sure to include the Newtonsoft.Json and System.Security.Cryptography namespaces.

    public ActionResult Index()
    {
    string basePath = AppDomain.CurrentDomain.BaseDirectory;
    string jsonString = System.IO.File.ReadAllText(Path.Combine(basePath, "embedConfig.json"));
    GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);
    return View();
    }

    [System.Web.Http.HttpPost]
    [System.Web.Http.Route("AuthorizationServer")]
    public ActionResult AuthorizationServer(string embedQuerString, string dashboardServerApiUrl)
    {
    embedQuerString += "&embed_user_email=" + GlobalAppSettings.EmbedDetails.UserEmail;
    var embedDetailsUrl = "/embed/authorize?" + embedQuerString.ToLower() + "&embed_signature=" + GetSignatureUrl(embedQuerString.ToLower());

    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 Json(resultContent);
    }
    }

    public 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);
    }
    }

Open the Scripts folder. Inside the Scripts folder, create a new folder called Embed. Inside the Embed folder, create a new file called Index.js. Define the renderDashboard() method, an instance is created and called the loadDashboard() method to render the dashboard. TherenderDashboard() method helps to render the dashboard using the Embed SDK file.

Index.cshtml location

   function renderDashboard(dashboardId) {
       var dashboard = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier, //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
           dashboardId: dashboardId, //Provide the 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: embedType,
           environment: environment, // If Cloud, you should use BoldBI.Environment.Cloud
           width: "100%",
           height: "100%",
           mode: BoldBI.Mode.View, //Rendering mode of dashboard it can be Design and View for dashboard.
           expirationTime: 100000, //Set the duration for the token to be alive.
           authorizationServer: {
               url: authorizationServerUrl //URL from which particular dashboard details is obtained from server.
           }      
       });
       dashboard.loadDashboard();
   };

Please open the Global.asax.cs file and add the following code sample.

    string basePath = AppDomain.CurrentDomain.BaseDirectory;
    string jsonString = System.IO.File.ReadAllText(Path.Combine(basePath, "embedConfig.json"));
    GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);

Please run your ASP.NET MVC sample in Visual Studio.

Contents

Prerequisites
How to run the sample
How this sample works
Steps to create new ASPNET MVC application to embed dashboard

Contents

Prerequisites
How to run the sample
How this sample works
Steps to create new ASPNET MVC application to embed dashboard

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!