Embedding Bold BI Dashboards in Flutter using the Embedded SDK

A GitHub link has been provided to get the sample application, which demonstrates the rendering of a dashboard on your Bold BI server. This is followed by steps to create your own embedding application in Flutter.

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

How to run the sample

Please get the Flutter sample from provided link.

In the index.html, please set your server details in the EmbedProperties as shown below. Embed Properties

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 empty string.
Environment	Your Bold BI application environment. (If Cloud, you should use cloud, if Enterprise, you should use enterprise)
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 as mentioned in next step
EmbedSecret	You could get your EmbedSecret key from Embed tab by enabling Enable embed authentication in Administration page.

Please run your Flutter sample.

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

function renderDashboard(dashboardId) {
   var dashboard = BoldBI.create({
       serverUrl: RootUrl + "/" + SiteIdentifier,
       dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property 
       embedContainerId: "dashboard",
       embedType: BoldBI.EmbedType.Component,
       environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
       width: (window.innerWidth - 30)+"px",
       height: (window.innerHeight - 39)+"px",
       mode: BoldBI.Mode.Design,
       expirationTime: 100000,
       authorizationServer: {
           url: "",
           data:data
       }        
   });
   dashboard.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	Data from the 'GetEmbedDetails' method in the application.

How this sample works

Based on the EmbedProperties provided in the index.html, authorize the server URL by calling the GetEmbedDetails() function.
In the above authorization, generate the SignatureUrl using the provided EmbedSecret key and validate the embed details in Bold BI. Once the details are validated, the dashboard will start to render.
Change the dashboard ID of the respective dashboard as you wish to embed it.

Steps to create new flutter application to embed dashboard

Install the Flutter in the visual studio code.
Download Android Studio from the official website provided, download the Flutter SDK from the official website provided, and include the paths in the system environment variable.
Create a folder for this project in the desired location and open it in Visual Studio Code.
Create the Flutter folder, run a command in the Visual Studio terminal as flutter create my_app. Here, my_app is the Flutter project name. Change the directory by running the command cd my_app.

Please include the following mandatory files in the <head> tag of the index.html file.

<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v7.7.9/boldbi-embed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/hmac-sha256.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/enc-base64.min.js"></script>

In the <body> tag, invoke the Init() method and create the DOM element with the id dashboard as follows.

   <div id="viewer-section">
       <div id="dashboard"></div>
   </div>
   <script>
   var RootUrl;
   var SiteIdentifier;
   var Environment;
   var UserEmail;
   var EmbedSecret;
   var data;
   var DashboardId;
   function Init() {
   
   RootUrl = "http://localhost:5000/bi";//Dashboard Server BI URL(ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)

   SiteIdentifier = "site/site1";//For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string.
   
   Environment = "enterprise";
   
   UserEmail =  "";//UserEmail of the Admin in Bold BI
   
   EmbedSecret = "";//Get the embedSecret key from Bold BI.

   DashboardId = "";//Dashboard id of the dashboard you want to embed here.('https://help.boldbi.com/embedded-bi/javascript-based/samples/v3.3.40-or-later/blazor-with-javascript/#get-dashboard-id')
       GetEmbedDetails();
   };

To perform this task, you should call the GetEmbedDetails() method to retrieve the details of a specific dashboard and then call the renderDashboard() method to display the dashboard.

In the GetEmbedDetails() method, the embedQueryString, userEmail, and the value from the GetSignatureUrl() method are appended as query parameters in the URL to retrieve details of a specific dashboard.

   function GetEmbedDetails(){
   var date = new Date();
   var dashboardServerApiUrl = RootUrl + "/api/" +SiteIdentifier;
   var embedQuerString = "embed_nonce=" + uuidv4Generartor()+
   "&embed_dashboard_id="+ DashboardId +
   "&embed_mode=view&embed_timestamp=" + Math.round((new Date()).getTime() / 1000)+"&embed_expirationtime=100000";
   embedQuerString += "&embed_user_email=" +UserEmail;
   var embedDetailsUrl = "/embed/authorize?" + embedQuerString+ 
   "&embed_signature=" + GetSignatureUrl(embedQuerString);
   var url = dashboardServerApiUrl + embedDetailsUrl;
   var http = new XMLHttpRequest();
   http.open("GET", url, true);
   http.responseType = 'json';
   http.setRequestHeader("Content-type", "application/json");
   http.onreadystatechange = function () {
   if (http.readyState == 4 && http.status == 200) {
   data = http.response;
   if(data)
       renderDashboard(DashboardId); 
   return  http.response ; }
   else if (http.readyState == 4 && http.status == 404) {
   return ("Server not found"); }
   else if (http.readyState == 4) {
   return (http.statusText)}
   };
   http.send();     
   }
   function GetSignatureUrl(message){
   var hash = CryptoJS.HmacSHA256(message, EmbedSecret);
   var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
   return(hashInBase64);
   }
   function uuidv4Generartor(){
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
           var r = Math.random() * 16 | 0,
               v = c == 'x' ? r : (r & 0x3 | 0x8);
           return v.toString(16);
       });
   }

Implement the renderDashboard() function to render the dashboard as shown.

   function renderDashboard(dashboardId) {
   var dashboard = BoldBI.create({
       serverUrl: RootUrl + "/" + SiteIdentifier, //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
       dashboardId: dashboardId, //Dashboard id of the dashboard you want to embed here.
       embedContainerId: "dashboard", //DOM id where the dashboard will be rendered.
       embedType: BoldBI.EmbedType.Component,
       environment: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
       width: (window.innerWidth - 30)+"px",
       height: (window.innerHeight - 39)+"px",
       mode: BoldBI.Mode.View, //Rendering mode of dashboard it can be Design and View for dashboard
       expirationTime: 100000, //Set the duration for the token to be alive.
       authorizationServer: {
           url: "",
           data:data
       }
   });
   dashboard.loadDashboard();
   };

Now, execute the command flutter run to run the project.

Contents

How to run the sample
How this sample works
Steps to create new flutter application to embed dashboard

Contents

How to run the sample
How this sample works
Steps to create new flutter application to embed dashboard

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!