How do I embed dashboard in a Spring Boot application?

Published:

Bold BI provides the support to embed dashboard in Spring Boot application with JavaScript Embed SDK. This article explains how to render the available dashboard in the Bold BI server and then create a new embedding application using Spring Boot, a Java-based framework to embed the dashboard. To get started on embedding, click this link to get enough information before working on the sample.

How to run the sample

Get the Spring Boot sample from the GitHub branch.
In the Spring Boot sample, you can find the EmbedProperties.java file in the demo folder where you have to initialize the below listed variables.

email	UserEmail of the Admin in your Bold BI, which would be used to get the dashboards details.
embedSecret	Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page

Open the index.html file in the folder named static and initialize the below listed variables.

rootUrl	Dashboard Server BI 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 an empty string.
environment	Your Bold BI application environment. (If Cloud, you should use `cloud`, if Enterprise, you should use `enterprise`)
dashboardId	Provide the dashboard id of the dashboard you want to embed here

Provide your details in the EmbedProperties.java, and in index.html, then run the downloaded Spring Boot sample.

How this sample works

In the HomeController.java, the GetDetails method is added, which has been called when initializing the renderDashboard() method of Index.html. In the renderDashboard() method, initialize the below listed variables.

serverUrl	Dashboard Server BI URL (examples: http://localhost:5000/bi/site/site1, https://sample.boldbi.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 hyphen.
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 GetDetails action in the application.

Use authorizationServer to call the API GetDetails action. In the provided sample, we have implemented this API. If you are embedding it in your application then you need to implement this API in your application.

With the above authorization, the SignatureUrl has been generated with the provided EmbedSecret key and validated embed details in Bold BI for the dashboard to be rendered in the viewer section of the index.html.

Steps to create a Spring Boot application to embed a dashboard

Follow the steps below to create a spring boot application to embed the dashboard.

To develop a Spring Boot application in Visual Studio Code, you need to install the following:
The Spring Initializr extension allows you to search for dependencies and generate new Spring Boot projects.
Once you have the extension installed, open the Command Palette (Ctrl+Shift+P) and type Spring Initializr to start generating a Maven.
Then follow the steps, Spring Initializr: create a Maven Project>2.6.1>Java>com.example>demo>Java>11>Spring Web, then open the created project in your vs code.
Under the \springboot\demo\src\main\java\com\example\demo folder, create the EmbedProperties.java class to define the mandatory properties as follows.

   public class EmbedProperties      {
       public static string email = "";//UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list

       public static string embedSecret = "";//You could get your EmbedSecret key from Embed tab by enabling `Enable embed authentication` in Administration page (https://help.boldbi.com/embedded-bi/site-administration/embed-settings/)
   }

Create another model class as EmbedClass.java to define the following properties.

public class EmbedClass {
      	 private String embedQuerString;
      	 private String dashboardServerApiUrl;
       	public String getEmbedQuerString(){
          	 return embedQuerString;
     	  }
       	public void setEmbedQuerString( String embedQuerString){
          	 this.embedQuerString = embedQuerString;
       	}
       	public String getDashboardServerApiUrl(){
           	return dashboardServerApiUrl;
      	 }
       	public void setDashboardServerApiUrl( String dashboardServerApiUrl){
         	  this.dashboardServerApiUrl = dashboardServerApiUrl;
      	 }
      	 }

7. The following scripts and style sheets are mandatory to render the dashboard. Refer these cdn files in index.html \springboot\demo\src\main\resources\static\index.html page of the <head> tag.

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
   <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
   <script type="text/javascript" src="http://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js"></script>

8. In the <body> section, initialize a method as renderDashboard() which can be implemented in the <script> tag. Inside the <body> section include the <div id="viewer-section"> with a <div id="dashboard"> inside it. This container can be used to render the dashboard.

   		<body onload="renderDashboard()"> 
		   <div id="viewer-section">
   		    <div id="dashboard"></div>
   		</div>
 		  </body>

In the main\java\com\example\demo\HomeController.java define the getDetails() which uses the GetSignatureUrl() method to generate the algorithm. In this API, the embedQuerString,userEmail and the value from the GetSignatureUrl() method are appended as the query parameters in the URL to get details of particular dashboard.

public class HomeController {
       		@PostMapping("GetDetails")
       		public String getDetails(@RequestBody EmbedClass embedQuerString) throws Exception{
           		String embedQuery = embedQuerString.getEmbedQuerString();
           		embedQuery+= "&embed_user_email=" + EmbedProperties.email;
           		String embedDetailsUrl = "/embed/authorize?" + embedQuery + "&embed_signature=" + GetSignatureUrl(embedQuery);
         		  RestTemplate restTemplate = new RestTemplate();
           		DefaultUriBuilderFactory defaultUriBuilderFactory = new DefaultUriBuilderFactory();
           defaultUriBuilderFactory.setEncodingMode(DefaultUriBuilderFactory.EncodingMode.NONE);//To avaiod encoding of query parameter which already encode using GetSignatureUrl method
           		restTemplate.setUriTemplateHandler(defaultUriBuilderFactory);
          		 String baseAddressString = embedQuerString.getDashboardServerApiUrl();
          		 String result = restTemplate.getForObject(baseAddressString + embedDetailsUrl, String.class);
           		return result;
      	 }
      		 public String GetSignatureUrl(String queryString) throws Exception {
           		if (queryString != null){
          		 Mac sha256_HMAC = Mac.getInstance("HmacSHA256");
         		  SecretKeySpec secret_key = new SecretKeySpec(EmbedProperties.embedSecret.getBytes("UTF-8"), "HmacSHA256");
         		  sha256_HMAC.init(secret_key);
             		  return new String(Base64.getEncoder().encode(sha256_HMAC.doFinal(queryString.getBytes("UTF-8"))));
               	}
           		return null;
     	  }

     	  }

In the renderDashboard() method of the index file, an instance is created and calls the loadDashboard() method to render the dashboard.

    function renderDashboard(dashboardId) {
           var dashboard = BoldBI.create({
           serverUrl: "http://localhost:5000/bi/site/site1",//Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
           dashboardId: dashboardId,//Provide the dashboard id of the dashboard you want to embed here.  
           embedContainerId: "dashboard",//DOM id where the dashboard will be rendered, here it is dashboard.
           embedType: BoldBI.EmbedType.Component,
           environment: "enterprise",//Your Bold BI application environment.
           width: "100%",
           height: "100%",
           mode: BoldBI.Mode.View,//Rendering mode of the dashboard can be Design and View for the dashboard.
           expirationTime: 100000,//Set the duration for the token to be alive.
               authorizationServer: {
               url: "/GetDetails" //The URL from which particular dashboard details are obtained from the server.
               }
           
               });

               dashboard.loadDashboard();
               };

Now, you can run the newly created Spring Boot application to render the dashboard.

How do I embed dashboard in a Spring Boot application?

How to run the sample

How this sample works

Steps to create a Spring Boot application to embed a dashboard

Related Links

Access denied