Embedding Bold BI Dashboards in Blazor using the Embedded SDK

The sample has been provided in the following sections for Blazor WebAssembly, which demonstrates the dashboard rendering available on your Bold BI server. It is followed by steps to create a new embedding application in Blazor WebAssembly on your own.

NOTE: Reading the Getting Started section of the documentation is the best way to begin. The Getting Started guide provides you with sufficient information that you need to know before working on the sample.

Prerequisites

• .NET Core 8.0
• Visual Studio Code

How to run Blazor WebAssembly sample

1. Please get the Blazor WebAssembly sample from GitHub.

2. Please make sure 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.

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

4. Please copy the downloaded embedConfig.json file and paste it into the Server folder location within the application. Please ensure 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. Please open your project in Visual Studio Code.

6. Then, open the terminal and navigate to the Server project directory by using cd command (e.g., cd C:\BlazorProject\Server).

7. To run the application, use the command dotnet watch run in the Visual Studio Code terminal.

How the Blazor WebAssembly sample works

1. The application checks if embedConfig.json is available; if it is, 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 index.html file and the dashboard will start to render it.

Steps to create new Blazor WebAssembly application to embed dashboard

1. Please create a folder in the desired location and open it in Visual Studio Code.

2. Open the terminal in the Visual Studio Code. Please refer to the following image.

3. In order to create a new project, we must execute the following command in the terminal.

       dotnet new blazorwasm --hosted

4. Please make sure that you have enabled embed authentication on the embed settings page. If it is not currently enabled, please refer to the image or detailed instructions provided.

5. To download the embedConfig.json file, please click on the following link for reference. Furthermore, you can use the image below for visual guidance.

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

   

7. In the Shared project, create a model class as EmbedClass.cs to define the following properties. These properties are used to retrieve the dashboard details from the server.

   Open the terminal and navigate to the Shared project directory using the cd command(e.g., cd C:\BlazorProject\Shared). Ensure that you include the necessary packages, such as System, System.Collections.Generic, System.Runtime.Serialization, System.Linq, System.Text and System.Threading.Tasks, in the EmbedClass.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; }
   }
   

8. In the Shared Project, create another 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; }
   }

9. In the Client project, the following scripts and style sheets are mandatory to render the dashboard. Include the following script tag in your \wwwroot\index.html page.

   <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v15.2.6/boldbi-embed.js"></script>

10. Inside the <body> tag, implement a function to render the dashboard.

        <script>
        var data;
        var authorizationServerUrl = "api/EmbedData/AuthorizationServer";
        async function fetchDataAndHandleErrors() {
            try {
                const response = await fetch('/api/EmbedData/GetConfig');
                const embedConfig = await response.json();
                // Transform camelCase keys to PascalCase
                const transformedEmbedConfigData = {
                    DashboardId: embedConfig.dashboardId,
                    EmbedType: embedConfig.embedType,
                    Environment: embedConfig.environment,
                    ServerUrl: embedConfig.serverUrl,
                    SiteIdentifier: embedConfig.siteIdentifier
                };
                data = transformedEmbedConfigData;
            } catch (error) {
                window.location.href = 'api/EmbedData/EmbedConfigErrorLog';
            }
        }
        fetchDataAndHandleErrors();
    
        function renderDashboard() {
            this.dashboard = BoldBI.create({
                serverUrl: data.ServerUrl + "/" + data.SiteIdentifier,
                dashboardId: data.DashboardId,
                embedContainerId: "dashboard",
                width: "100%",
                height: window.innerHeight + "px",
                authorizationServer: {
                    url: authorizationServerUrl
                }
            });
            this.dashboard.loadDashboard();
        }
        </script>

11. Open the Index.razor file in the Client project, create the DOM element with the id dashboard and implement the code as shown to invoke the renderDashboard() method.

       @page "/"
       @inject IJSRuntime JsRuntime
    
       <div id="dashboard"> </div>
    
       @functions {
       protected override void OnAfterRender(bool firstRender)
       {
    
           JsRuntime.InvokeAsync<object>("renderDashboard");
       }
       }

12. Open the MainLayout.razor file in the Client project and replace the code mentioned below.

       @inherits LayoutComponentBase
       <div class="page">
           <main>
               <article class="content px-4" style="padding-left: 0px !important; padding-right: 0px !important;">
                   @Body
               </article>
           </main>
       </div>

13. In the Server project, create the EmbedDataController.cs controller under the Controllers folder. To obtain specific dashboard details, define an API called AuthorizationServer() which utilizes the GetSignatureUrl() method to generate the signature. In this API, append the embedQueryString, userEmail, and the value from the GetSignatureUrl() method as query parameters in the URL to the authorization server of the specific dashboard.

    Open the terminal and navigate to the Server project directory using the cd command (e.g., cd C:\BlazorProject\Server). Ensure that you include the necessary packages, such as Microsoft.AspNetCore.Http, Microsoft.AspNetCore.Mvc, System, System.Collections.Generic, System.Net.Http, System.Linq, System.Text, System.Threading.Tasks, Newtonsoft.Json, BlazorWebAssembly.Shared, and BlazorWebAssembly.Client.Pages, in the EmbedDataController.cs controller file.

       [Route("api/[controller]")]
       [ApiController]
       public class EmbedDataController : Controller
       {
       [HttpGet]
       [Route("GetConfig")]
       public IActionResult GetConfig()
       {
           var jsonData = System.IO.File.ReadAllText("embedConfig.json");
           string basePath = AppDomain.CurrentDomain.BaseDirectory;
           string jsonString = System.IO.File.ReadAllText(Path.Combine(basePath, "embedConfig.json"));
           GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);
           
           return Json(new
           {
               DashboardId = GlobalAppSettings.EmbedDetails.DashboardId,
               ServerUrl = GlobalAppSettings.EmbedDetails.ServerUrl,
               EmbedType = GlobalAppSettings.EmbedDetails.EmbedType,
               Environment = GlobalAppSettings.EmbedDetails.Environment,
               SiteIdentifier = GlobalAppSettings.EmbedDetails.SiteIdentifier
           });
       }
       [HttpPost("[action]")]
       [Route("AuthorizationServer")]
       public string AuthorizationServer([FromBody] object embedQuerString)
       {
           var embedClass = JsonConvert.DeserializeObject<EmbedClass>(embedQuerString.ToString());
           var embedQuery = embedClass.embedQuerString;
           // User your user-email as embed_user_email
           embedQuery += "&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;
           embedQuery += "&embed_server_timestamp=" + timeStamp;
           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 message)
       {
           var encoding = new System.Text.UTF8Encoding();
           var keyBytes = encoding.GetBytes(GlobalAppSettings.EmbedDetails.EmbedSecret);
           var messageBytes = encoding.GetBytes(message);
           using (var hmacsha1 = new System.Security.Cryptography.HMACSHA256(keyBytes))
           {
               var hashMessage = hmacsha1.ComputeHash(messageBytes);
               return Convert.ToBase64String(hashMessage);
           }
       }
       }

14. Navigate to the Server project directory using the cd command, such as cd C:\BlazorProject\Server. Run your Blazor WebAssembly sample with the command dotnet watch run in Visual Studio Code.