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

A link has been provided to download 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 Core 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

Please download the ASP.NET Core sample.

In the ASP.NET Core sample, you can find the EmbedProperties class file in the Models folder. Embed Properties

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.
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

Provide your details in the EmbedProperties.cs, then run your ASP.NET Core sample.

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

   function renderDashboard(dashboardId) {
   var dashboard = BoldBI.create({
   serverUrl: "http://localhost:5000/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: "enterprise",
   width: "100%",
   height: "100%",
   mode: BoldBI.Mode.Design,
   expirationTime: 100000,
   authorizationServer: {
       url: "/GetDetails"
   }
    
   });

   dashboard.loadDesigner();
   };

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 'GetDetails' action in the application.

How this sample works

Based on the values provided in the EmbedProperties.cs, get the user token and validate it, then get the dashboards list from the server.
In the HomeController.cs, the GetToken() method and GetDashboards() action are added, which has been called when initializing the DOM in the Index.html.
When you are selecting the dashboard to render, authorize the server URL by calling the GetEmbedDetails action with the provided EmbedProperties values.
In the above authorization, the SignatureUrl has been generated with the provided EmbedSecret key and validated embed details in Bold BI for the dashboard to be rendered in the viewer section of the index.cshtml.

Steps to create ASP.NET Core application to embed dashboard

Start Visual Studio and click Create a new project.
Choose the ASP.NET Core Web Application, then click Next.
Change the project name as you want, then click Create.
In the dropdown with the ASP.NET Core version, choose ASP.NET Core 3.1.
Select the Web Application (Model-View-Controller) template, then click Create.

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

public class EmbedProperties
{
    public static string RootUrl = "http://localhost:5000/bi";//Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)

    public static string SiteIdentifier = "site/site1";//For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be empty string.

    public static string Environment = "enterprise";//Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `enterprise`)

    public static string UserEmail = "";//UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list

    public static string UserPassword = "";//Password of the Admin in Bold BI, which would be used to get the dashboards list

    public static string EmbedSecret = "";//You could get your EmbedSecret key from Embed tab by enabling `Enable embed authentication` in Administration page (https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
}

Create another model class as DataClass.csto define the following properties. These properties are used to get the dashboard list from the server.

[DataContract]
public class EmbedClass
{
    [DataMember]
    public string embedQuerString { get; set; }
    [DataMember]
    public string dashboardServerApiUrl { get; set; }
}

public class TokenObject
{
    public string Message { get; set; }

    public string Status { get; set; }

    public string Token { get; set; }
}

public class Token
{
    [JsonProperty("access_token")]
    public string AccessToken {get;set;}

    [JsonProperty("token_type")]
    public string TokenType {get;set; }

    [JsonProperty("expires_in")]
    public string ExpiresIn {get; set;}

    [JsonProperty("email")]
    public string Email {get;set;}

    public string LoginResult {get;set;}

    public string LoginStatusInfo {get;set;}

    [JsonProperty(".issued")]
    public string Issued { get; set; }

    [JsonProperty(".expires")]
    public string Expires { get; set; }
}

The following scripts and style sheets are mandatory to render the dashboard. Set the Layout = null at the top and replace the following code in your \Views\Home\Index.cshtml page of the <head> tag. Index.cshml location

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
<script type="text/javascript" src="http://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js"></script>

In the <body> section, initialize a method as Init() which can be implemented in the Index.js file. Inside the <body> section include the <div id="panel"> to display list of dashboard and the <div id="viewer-section"> with a <div id="dashboard"> inside it. This container can be used to render dashboard.

<body onload="Init()">
    <div id="container">
            <div class="header-section">
                <div id="grid-title">All Dashboard</div>
            </div>
            <div id="panel"></div>
    </div>
    
    <div id="viewer-section">
        <div id="dashboard"></div>
    </div>
</body>

In the Controllers\HomeController.cs define the GetDashboard() method to get list of dashboards from the serve. It uses the GetToken() method, which helps to get the token from the server. Add a default view as Index.cshtml

   public IActionResult Index()
   {
       return View();
   }

   [HttpGet]
   [Route("GetDashboards")]
   public string GetDashboards()
   {
   var token = GetToken();
   using (var client = new HttpClient())
   {
       client.BaseAddress = new Uri(EmbedProperties.RootUrl);
       client.DefaultRequestHeaders.Accept.Clear();
       client.DefaultRequestHeaders.Add("Authorization", token.TokenType + " " + token.AccessToken);
       var result = client.GetAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/v2.0/items?ItemType=2").Result;
       string resultContent = result.Content.ReadAsStringAsync().Result;
       return resultContent;
    }
   }
   public Token GetToken()
   {
   using (var client = new HttpClient())
   {
       client.BaseAddress = new Uri(EmbedProperties.RootUrl);
       client.DefaultRequestHeaders.Accept.Clear();

       var content = new FormUrlEncodedContent(new[]
           {
               new KeyValuePair<string, string>("grant_type", "password"),
               new KeyValuePair<string, string>("UserId", EmbedProperties.UserEmail),
               new KeyValuePair<string, string>("Password", EmbedProperties.UserPassword)
           });
       var result = client.PostAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/get-user-key", content).Result;
       string resultContent = result.Content.ReadAsStringAsync().Result;
       var response = JsonConvert.DeserializeObject<TokenObject>(resultContent);//Token token = new Token();
       var tokenObj = JsonConvert.DeserializeObject<Token>(response.Token);
       return tokenObj;
    }
    }

To get particular dashboard details, define an API GetDetails() which uses the GetSignatureUrl() method to generate the algorithm. In this API, the embedQuerString,userEmail and the value from the GetSignatureUrl() method are appended as the query parameters in the URL to get details of particular dashboard.

   [HttpPost]
   [Route("GetDetails")]
   public string GetDetails([FromBody] object embedQuerString)
   {
       var embedClass = Newtonsoft.Json.JsonConvert.DeserializeObject<EmbedClass>(embedQuerString.ToString());
       var embedQuery = embedClass.embedQuerString;
       // User your user-email as embed_user_email
       embedQuery += "&embed_user_email=" + EmbedProperties.UserEmail;
       var embedDetailsUrl = "/embed/authorize?" + embedQuery + "&embed_signature=" + GetSignatureUrl(embedQuery);

       using (var client = new HttpClient())
       {
           client.BaseAddress = new Uri(embedClass.dashboardServerApiUrl);
           client.DefaultRequestHeaders.Accept.Clear();
           var result = client.GetAsync(embedClass.dashboardServerApiUrl + embedDetailsUrl).Result;
           string resultContent = result.Content.ReadAsStringAsync().Result;
           return resultContent;
       }

   }

   public string GetSignatureUrl(string queryString)
   {
       if (queryString != null)
       {
           var encoding = new System.Text.UTF8Encoding();
           var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
           var messageBytes = encoding.GetBytes(queryString);
           using (var hmacsha1 = new HMACSHA256(keyBytes))
           {
               var hashMessage = hmacsha1.ComputeHash(messageBytes);
               return Convert.ToBase64String(hashMessage);
           }
       }
       return string.Empty;
   }

Create the Index.js file under the wwwroot/js folder. Define the Init() function, which uses the Ajax call to contact the server. Once the Ajax call is succeeded, the ListDashboards() method will be invoked to list dashboard, and the renderDashboard() method is used to render the dashboard. Index.cshtml location

   function Init() {
   var http = new XMLHttpRequest();
   http.open("GET", "/GetDashboards", true);
   http.responseType = 'json';
   http.setRequestHeader("Content-type", "application/json");
   http.onreadystatechange = function () {
       if (http.readyState == 4 && http.status == 200) {
           ListDashboards.call(this, typeof http.response == "object" ? http.response : JSON.parse(http.response));
       }
       else if (http.readyState == 4 && http.status == 404) {
           console.log("Server not found");
       }
       else if (http.readyState == 4) {
           console.log(http.statusText);
       }
   };
   http.send();
   };

In the ListDashboards()method, the dashboard list details are extracted from the response and appended to the list in a respective container. TherenderDashboard() method helps to render the dashboard using theEmbed SDK file.

function ListDashboards(data) {
       if (typeof (data) != "undefined" && data != null) {
       renderDashboard("'" + data[0].element.Id + "'");
       data.forEach(function (element) {
       var divTag = document.createElement("div");
       divTag.innerHTML = element.Name;
       divTag.className = "dashboard-item";
       divTag.setAttribute("onclick", "renderDashboard('" + element.Id + "')");
       divTag.setAttribute("name", element.Name);
       divTag.setAttribute("itemid", element.Id);
       divTag.setAttribute("version", element.Version);
       divTag.setAttribute("ispublic", element.IsPublic);
       document.getElementById("panel").appendChild(divTag);
       });
       }
    }

In the renderDashboard() method, an instance is created and calls the loadDashboard() method to render the dashboard.

function renderDashboard(dashboardId) {
       var dashboard = BoldBI.create({
       serverUrl: "http://localhost:5000/bi/site/site1",//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: BoldBI.EmbedType.Component,
       environment: "enterprise",//Your Bold BI application environment.
       width: "100%",
       height: "100%",
       mode: BoldBI.Mode.View,//Rendering mode of the dashboard can be Design and View for the dashboard.
       expirationTime: 100000,//Set the duration for the token to be alive.
           authorizationServer: {
           url: "/GetDetails" //The URL from which particular dashboard details are obtained from the server.
           }
       
           });

           dashboard.loadDashboard();
           };

Contents

How to run the sample
How this sample works
Steps to create ASPNET Core application to embed dashboard

Contents

How to run the sample
How this sample works
Steps to create ASPNET Core application to embed dashboard

Please provide additional information

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