How Does the API Allow user to Control the Bold BI Components and Integrate it Seamlessly Into the Application

Bold BI components can be seamlessly integrated into your web application using JavaScript embedding. This allows you to control the components and embed them into your application without requiring login options. This article will guide you through the process of how this integration works and how it renders the Bold BI dashboards in your application.

Note: If you are embedding Power BI content into your application, you can use the Power BI JavaScript SDK and Embed Token to control interaction with embedded reports and dashboards programmatically. Most of competitors mentioning the controls mean restriction of interaction to the resources

Prerequisites

Before you begin, ensure that you have the following:

• An active Bold BI account with access to the dashboard you want to embed.
• A web application where you want to embed the dashboards.

Steps to Control and Embed the Dashboard Using API

1. To understand the essential JavaScript API for integrating the Bold BI dashboards, refer to this article.

2. The Bold BI instance will be created with the essential API as shown below:

   function renderDashboard(dashboardId) {
       var dashboard = BoldBI.create({
           serverUrl: "http://localhost:61904/bi/site/site1",
           dashboardId: "a270709a-873c-4e82-a958-5ff40889f6ba",
           embedContainerId: "dashboard",
           mode: BoldBI.Mode.View,
           embedType: BoldBI.EmbedType.Component,
           environment: BoldBI.Environment.Enterprise,
           width: "100%",
           height: "100%",
           expirationTime: 10000,
           authorizationServer: {
               url: "http://example.com/embeddetail/get"
           }
       });
       dashboard.loadDashboard();
   }
   

3. The authorizationServerUrl API endpoint acts as the bridge between your application and the Bold BI server. You will need to update the secure details, such as email and group-based access, if you want to provide access to users from any group. To learn more about the authorization server, refer to this article.

4. You can use the currently logged-in user email at user@domain.com or username at username in the GetEmbedDetails method. However, this user should have access permission to the dashboard. To learn more about managing permissions, refer to the help documentation.

    [HttpPost]
      [Route("embeddetail/get")]
      public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
      {
           // Use your user-email as embed_user_email
           embedQuerString += "&embed_user_email=user@domain.com";
               
           // Use your username as embed_user_email
           //embedQuerString += "&embed_user_email=username";
               
           //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 embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
               
           var embedDetailsUrl = "/embed/authorize?" + embedQuerString + embedSignature;
               
           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 resultContent;
           }
       }
   

5. The GetSignatureUrl method is called from the previous GetEmbedDetails action for the embed_signature value.

    public string GetSignatureUrl(string queryString)
           {
               // Get the embedSecret key from Bold BI.
               var embedSecret = "8apLLNabQisvriG2W1nOI7XWkl2CsYY";
               var encoding = new System.Text.UTF8Encoding();
               var keyBytes = encoding.GetBytes(embedSecret);
               var messageBytes = encoding.GetBytes(queryString);
               using (var hmacsha1 = new HMACSHA256(keyBytes))
               {
                   var hashMessage = hmacsha1.ComputeHash(messageBytes);
                   return Convert.ToBase64String(hashMessage);
               }
           }
   

Note: The above code sample is in C#, but you can use the language based on your application platform.

7. Now, you can render the dashboard in your application without any login.

   

References

• JavaScript Embedding
• Authorize Server Documentation
• Managing Permission to dashboard