Embedding Bold BI Dashboards in PHP using the 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 PHP on your own.

NOTE: Reading the Getting Started section of the documentation is the best way to get started. 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 PHP sample.

2. In the Index.php, set your server details to the EmbedProperties as follows.

   serverUrl	Dashboard Server BI URL Enterprise Edition- http://localhost:5000/bi/site/site1Cloud -http://dashboard.syncfusion.com/bi
   dashboardId	Dashboard id of the dashboard you want to embed here. Here dashboard id first dashboard in list will be assigned, if you click particular dashboard from list, that particular dashboard id will be passed.
   authorizeServerUrl	URL pointing to AuthorizeServer API file. We have running PHP sample in 8080 port. Ex: http://localhost:8080/rest/authorizeserver.php

3. In the AuthorizeServer.php, set the UserEmail and Embed Secret key, which has been used to create an embed signature to authorize the server from the PHP sample. Learn more about authorized server here.

   

   UserEmail	UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list
   EmbedSecret	You could get your EmbedSecret key from Embed tab by enabling Enable embed authentication in Administration page

4. Run your PHP sample.

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

      function embedSample() {
          var dashboardemb = BoldBI.create({
              serverUrl: '<?php echo $serverUrl;?>',
              dashboardId: '<?php echo $dashboardId;?>', //Provide the item id to render it in the design mode and create a dashboard to remove this property.
              embedContainerId: "dashboard",
              embedType: BoldBI.EmbedType.Component,
              environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
              mode: BoldBI.Mode.Design,
              height: "700px",
              width: "1500px",
              authorizationServer: {
                  url: '<?php echo $authorizeServerUrl;?>'
              },
              expirationTime: "100000",
          });
          dashboardemb.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 'GetEmbedDetails' method in the 'authorizeserver.php' file.

How this sample works

1. When you embed a dashboard to render, you will authorize the server URL by calling the GetEmbedDetails function by API call with provided EmbedProperties values.

2. In the above authorization, the SignatureUrl has been generated with the provided EmbedSecret key and validated the embed details in Bold BI. Then only the embedded widget will be rendered in the Index.php.

3. In the Index.php change the dashboard Id as you wish to embed.

Steps to create new PHP application to embed dashboard

1. Install the PHP Intelephense and PHP Server in the visual studio code.

2. Download the PHP from the following official website. And include the path in the system environment variable.

3. In the desired location, create a folder for this project and open it in the visual studio code.

4. Create an index.php file inside the folder, and define variables as follows.

   <?php
   // The ServerURL, DashboardPath, and AuthorizeSeverURL to embed the widget.
   $serverUrl = "http://localhost:55106/bi/site/site1";
   $dashboardId ="a3042415-5c57-4f66-b475-8502be4987e8";
   $authorizeServerUrl = "http://localhost:8070/boldbi/dashboard/rest/authorizeserver.php";
   ?>

5. Refer to the mandatory cdn file in the <head> tag as follows.

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

6. In the <body> tag, create the DOM element with the id dashboard and initialize the embedSample() method, which is implemented in <script> tag as follows.

      <div id="dashboard">
      </div>
      <script>
          function embedSample() {
              var dashboardemb = BoldBI.create({
                  serverUrl: '<?php echo $serverUrl;?>', //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
                  dashboardId: '<?php echo $dashboardId;?>', //Dashboard id of the dashboard you want to embed here.
                  embedContainerId: "dashboard",
                  embedType: BoldBI.EmbedType.Component,
                  environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
                  mode: BoldBI.Mode.View,
                  height: "700px",
                  width: "1500px",
                  authorizationServer: {
                      url: '<?php echo $authorizeServerUrl;?>' //URL from which particular dashboard details is obtained from server.
                  },
                  expirationTime: "100000", //Set the duration for the token to be alive.
              });
              dashboardemb.loadDashboard();
          }
      </script>

7. Create a file authorizeserver.php inside a folder rest, and define the variables secretCode and userEmail for authorization purposes.

          $secretCode = "";// Use your SecretCode here.
          $userEmail = ""; // Email address of the user.
   
          $data = json_decode(file_get_contents('php://input'), true);
   
         // Getting the embedQuerString and dashboardServerApiUrl from the BoldBI wrapper
          if ($data != null && $data["embedQuerString"] !="" && $data["dashboardServerApiUrl"]!="") {
          $embedQuerString = $data["embedQuerString"];
          $dashboardServerApiUrl= $data["dashboardServerApiUrl"];
          $dashdetails = GetEmbedDetails($embedQuerString, $dashboardServerApiUrl);
           header('Content-type: application/json');
          echo json_encode($dashdetails);
          }
   
          // This function used to get dashboard details from the Bold BI Server. 
          function GetEmbedDetails($embedQuerString, $dashboardServerApiUrl){
          global $userEmail;
          $embedQuerString = $embedQuerString . "&embed_user_email=" . $userEmail. "&embed_datasource_filter=[{&&StoreName=Trousers','Jackets}]";
          $embedSignature = "&embed_signature=" . getSignatureUrl($embedQuerString);
          //echo $embedSignature;
          $embedDetailsUrl = "/embed/authorize?" . $embedQuerString . $embedSignature;
          //echo   $dashboardServerApiUrl . $embedDetailsUrl;
          $curl = curl_init();
          curl_setopt_array($curl, array(
           CURLOPT_URL => $dashboardServerApiUrl . $embedDetailsUrl,
           CURLOPT_RETURNTRANSFER => true,
           CURLOPT_TIMEOUT => 50000,
           CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
          CURLOPT_CUSTOMREQUEST => "GET",
          CURLOPT_HTTPHEADER => array(
          "Content-Type: application/json"
          ),
          ));
          $response = curl_exec($curl);
          $err = curl_error($curl);
          curl_close($curl);
   
          return $response;
          }
   
          //// Prepare embed_Signature by encrypting with secretCode ////
          function getSignatureUrl($embedQuerString) {
          global $secretCode; 
          $keyBytes = utf8_encode($secretCode);            
          $messageBytes = utf8_encode($embedQuerString);
          $hashMessage = hash_hmac('sha256',$messageBytes, $keyBytes, true);
          $signature = base64_encode($hashMessage);
          return $signature;
          }

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

9. Now, right-click and choose the PHP Server: Server project.