Documentation
Demos
Support
Blog
Download Free Trial
Search results

Bold BI Dashboards embedding in Node.js using Embedded SDK

A GitHub link has been provided to get the sample application, which demonstrates the rendering of dashboard available in your Bold BI server and followed by steps to create a new embedding application in the Node.js 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

  1. Please get the Node.js Application

  2. You need to set your embed properties details in the index.html and Embed.js.
    Embed Properties in Index Embed Properties in Embed

    rootUrl Bold BI Server 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.
    environment Your Bold BI application environment. (If Cloud, you should use cloud, if Enterprise, you should use enterprise)
    DashboardId Item id of the dashboard in BI server.
    authorizationUrl Url of the GetDetails(API) in this application
    EmbedSecret You can get your EmbedSecret key from embed tab by enablingEnable embedauthentication in Administration page
    UserEmail UserEmail of the Admin in your Bold BI, which would be used to authorize the server.

  3. Get the item id of the dashboard from the BI server. Please refer to this link and the following screenshot. Get Dashboard Id

  4. Run your Node.js sample.

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

    function embedSample() {
       var boldbiEmbedInstance = BoldBI.create({
           serverUrl: rootUrl + siteIdentifier,
           dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property                
           embedContainerId: "dashboard",// This should be the container id where you want to embed the dashboard
           embedType: BoldBI.EmbedType.Component,
           environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
           mode: BoldBI.Mode.Design,
           height: "800px",
           width: "1200px",
           authorizationServer: {
               url: "http://localhost:8080/embeddetail/get"
           },
           expirationTime: "100000",
       });
       boldbiEmbedInstance.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 'embedDetails' method in the 'embed.js' file.

How this sample works

  1. Based on the dashboardId provided in the index.html file, authorize the server URL by calling the GetEmbedDetails API(http://localhost:8080/embeddetail/get) call with the provided EmbedProperties values. Get Embed Details

  2. In the above authorization, generate the SignatureUrl with the provided EmbedSecret key and validate embed details in Bold BI. Once the details are validated, the dashboard starts to render in index.html.

  3. In the Index.html, change the dashboard Id of the respective dashboard as you wish to embed. Set Dashboard Id

Steps to create new Node.js application to embed dashboard

  1. Create a folder in the desired location and open it in the visual studio code. Create a js file with the name embed.js and html file in it.

  2. In the html file, refer to the mandatory file in the <head>, the <body> tag initializes the embedSample() method, the DOM element with the dashboard id is created in the <div> tag where the required dashboard will be rendered.

    <head>  
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.5.8/boldbi-embed.js"></script>
</head>
<body onload="embedSample();">
    <div id="dashboard"></div>
</body>

  3. In the <script> tag, define the required properties as follows.

        <script>
       var siteIdentifier = "site/site1";
       
       var environment = "enterprise";

       var dashboardId ="";

       var rootUrl = "http://localhost:1234/bi/";
       var authorizationUrl="http://localhost:8080/embeddetail/get";

       function embedSample() {
           var boldbiEmbedInstance = BoldBI.create({
               serverUrl: rootUrl + siteIdentifier,//Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)
               dashboardId: dashboardId, //Item id of the dashboard in BI server.                
               embedContainerId: "dashboard", // This should be the container id where you want to embed the dashboard.
               embedType: BoldBI.EmbedType.Component,
               environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
               mode: BoldBI.Mode.View,
               height: "800px",
               width: "1200px",
               authorizationServer: {
                   url: "http://localhost:8080/embeddetail/get" //Url of the GetDetails(API) in this application.
               },
               expirationTime: "100000", //Set the duration for the token to be alive.
           });
           boldbiEmbedInstance.loadDashboard();
       }
   </script>

  4. In the javascript file, declare the variables embedSecret and userEmail , create an API /embeddetail/get which uses the method GetSignatureUrl() to generate the algorithm. In this API, the embedQuerString,userEmail and the value from the GetSignatureUrl() method are appended as query parameters in the URL to get details of a particular dashboard. Run the command node embed.js to render the dashboard.

      // Get the embedSecret key from the Bold BI.
   var embedSecret = "";

  //Enter your BoldBI credentials here.
   var userEmail = "";

   //Parse the JSON bodies (as sent by API clients).
   app.use(express.json());

   app.post('/embeddetail/get', function (req, response) {
   var embedQuerString = req.body.embedQuerString;
   var dashboardServerApiUrl = req.body.dashboardServerApiUrl;

   embedQuerString += "&embed_user_email=" + userEmail;
   var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
   var embedDetailsUrl = "/embed/authorize?" + embedQuerString+embedSignature;

   http.get(dashboardServerApiUrl+embedDetailsUrl, function(res){
           var str = '';
           res.on('data', function (chunk) {
               str += chunk;
           });
           res.on('end', function () {
               response.send(str);
           });
   });
   })

   function GetSignatureUrl(queryString)
   {
   var keyBytes = Buffer.from(embedSecret);
   var hmac = crypto.createHmac('sha256', keyBytes);
   data = hmac.update(queryString);
   gen_hmac= data.digest().toString('base64');

   return gen_hmac;
   }
Previous
Next