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 dashboard in your Bold BI server and followed by steps to create a new embedding application in the Flutter 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

Please get the Flutter sample from provided link.

In the index.html, set your server details to the EmbedProperties as follows.
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.

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 with the provided EmbedSecret key and validate the embed details in Bold BI. Once details are validated, the dashboard starts to render.
Change the dashboard Id of the respective dashboard as you wish to embed.

Steps to create new flutter application to embed dashboard

Install the Flutter in the visual studio code.
Download the android studio from the following official website,download the flutter SDK from the following official website, and include the paths in the system environment variable.
In the desired location, create a folder for this project and open it in the 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 and change the directory by running the command cd my_app.

Include the following mandatory files in the index.html of the <head> tag as follows.

<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.18.11/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, create the DOM element with 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();
   };

Here you need to invoke the GetEmbedDetails() method where you get the details of a particular dashboard and invoke the renderDashboard() method to render a dashboard.

In this GetEmbedDetails(), embedQuerString, userEmail and the value from the GetSignatureUrl() method is appended as query parameters in the URL to get details of a particular 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() to render the dashboard as follows.

   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, run the project by executing the command flutter run.

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!