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

A GitHub link has been provided to get the sample application, which demonstrates the rendering of a single dashboard and a list of dashboards in your Bold BI server. This is followed by steps to create a new embedding application in ASP.NET Core 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 Core sample from GitHub.
Please ensure 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.
To download the embedConfig.json file, please follow this 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 that you have placed it correctly in the application, as shown in the image.

EmbedConfig 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)

Open your project in Visual Studio Code and use the command dotnet restore to restore the necessary packages. After the packages have been restored, use the command dotnet build to build the project.
To run your ASP.NET Core sample in Visual Studio Code, use the command dotnet run.

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

How this sample works

Based on the values in the embedConfig.json file, you will obtain the user token and verify its validity. Following that, you will be able to retrieve the list of dashboards from the server by utilizing the appropriate API.
In the HomeController.cs, add the GetDashboards() action, which will use the GetToken method to retrieve the list of dashboards while initializing the DOM in the Index.html.
To generate an access token, call the TokenGeneration API with the provided embedConfig values.
Once the token is generated, it will be returned to the index.html file and the dashboard will start to render it.

Steps to create ASP.NET Core application to embed dashboard

Please create a folder in the desired location and open it in Visual Studio Code.
Next, open the terminal in Visual Studio Code. For reference, please see the image below.

Terminal Image

In order to create a new project, we must execute this command within the terminal.
```
   dotnet new webapp
```
Please make sure that you have enabled embed authentication on the embed settings page. If it is currently not enabled, please refer to the provided image or detailed instructions in order to enable it.
To download the embedConfig.json file, please click on this link for reference. Additionally, you can refer to the following image for visual guidance.
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 shown in the following image.

Please create a new folder named Models and within it, create a model class called DataClass.cs to define the following properties. These properties will be utilized to retrieve the list of dashboards from the server.

To add the necessary references to the project, execute the following command in the terminal: dotnet add package Newtonsoft.Json. Make sure to include the Newtonsoft.Json namespaces in the DataClass.cs model file.

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 to define the following properties. These properties will maintain the object of the embedConfig.json file within the GlobalAppSettings.
```
public class GlobalAppSettings
{
    public static EmbedDetails EmbedDetails { get; set; }
}
```
Please create a new folder called Home within the application. Then, create a new file called Index.cshtml within the Home folder.

The following script is necessary to display the dashboard. Set the Layout = null at the top and add the following code in your \Pages\Home\Index.cshtml page within the <head> tag.

Index.cshml Image

 <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
 <script type="text/javascript" src="~/js/Index.js"></script>
 <link rel="stylesheet" href="~/css/site.css" />
 <script type="text/javascript">
    var rootUrl = "@ViewBag.ServerUrl";
    var dashboardId = "@ViewBag.DashboardId";
    var siteIdentifier = "@ViewBag.SiteIdentifier";
    var tokenGenerationUrl = "@Url.Action("TokenGeneration", "Home")";
 </script>

In the <body> section, include the <div id="viewer-section"> that contains a <div id="dashboard">. This container can be utilized to display the dashboard.

   <body onload="renderDashboard(dashboardId)">
      <div id="viewer-section" style="width: 100%";>
         <div id="dashboard"></div>
      </div>
   </body>

Please create a new folder called Controllers. Then, create a new file called HomeController.cs within the Controllers folder. To obtain specific dashboard details with token, define an API TokenGeneration(). In this API, get the required embed details in the object model. Make sure to include the Newtonsoft.Json, System.Collections.Generic, System.Net.Http, System.Text, and Microsoft.AspNetCore.Mvc namespaces.

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

           // Pass specific properties to the view using ViewBag
           ViewBag.DashboardId = GlobalAppSettings.EmbedDetails.DashboardId;
           ViewBag.ServerUrl = GlobalAppSettings.EmbedDetails.ServerUrl;
           ViewBag.EmbedType = GlobalAppSettings.EmbedDetails.EmbedType;
           ViewBag.Environment = GlobalAppSettings.EmbedDetails.Environment;
           ViewBag.SiteIdentifier = GlobalAppSettings.EmbedDetails.SiteIdentifier;

           return View();
       }
       catch
       {
           return View("EmbedConfigErrorLog");
       }
   }

   [HttpPost]
   [Route("TokenGeneration")]
   public string TokenGeneration()
   {
       var embedDetails = new
       {
           email = GlobalAppSettings.EmbedDetails.UserEmail,
           serverurl = GlobalAppSettings.EmbedDetails.ServerUrl,
           siteidentifier = GlobalAppSettings.EmbedDetails.SiteIdentifier,
           embedsecret = GlobalAppSettings.EmbedDetails.EmbedSecret,
           dashboard = new  // Dashboard ID property is mandatory only when using BoldBI version 14.1.11.
           {
               id = GlobalAppSettings.EmbedDetails.DashboardId
           }
       };

       //Post call to Bold BI server
       var client = new HttpClient();
       var requestUrl = $"{embedDetails.serverurl}/api/{embedDetails.siteidentifier}/embed/authorize";

       var jsonPayload = JsonConvert.SerializeObject(embedDetails);
       var httpContent = new StringContent(jsonPayload, Encoding.UTF8, "application/json");

       var result = client.PostAsync(requestUrl, httpContent).Result;
       var resultContent = result.Content.ReadAsStringAsync().Result;

       return JsonConvert.DeserializeObject<dynamic>(resultContent).Data.access_token;
   }

Please remove the lines app.MapRazorPages() and builder.Services.AddRazorPages() from the Program.cs Instead, add the following lines of code: builder.Services.AddControllersWithViews(); app.MapControllerRoute(name: "default", pattern: "{controller=Home}/{action=Index}/{id?}").

Please create the Index.js file under the wwwroot/js folder. Define the renderDashboard() method. Then, create an instance and call the loadDashboard() method to render the dashboard. TherenderDashboard() method will be used to render the dashboard using the Embed SDK file.

Index.cshtml location

 function getEmbedToken() {
    return fetch(tokenGenerationUrl, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({})
    })
    .then(response => {
       if (!response.ok) throw new Error("Token fetch failed");
       return response.text();
    });
 }

 function renderDashboard(dashboardId) {
    getEmbedToken()
       .then(accessToken => {
             const dashboard = BoldBI.create({
                serverUrl: rootUrl + "/" + siteIdentifier,
                dashboardId: dashboardId,
                embedContainerId: "dashboard",
                embedToken: accessToken
             });

             dashboard.loadDashboard();
       })
       .catch(err => {
             console.error("Error rendering dashboard:", err);
       });
 };

To restore the necessary packages, run the command dotnet restore. After the packages have been restored, use the command dotnet build to build the project.
To run your ASP.NET Core sample in Visual Studio Code, use the command dotnet run.