Documentation
Demos
Support
Blog
Start Free Trial
Search results

Steps to embed Bold BI in your application

Follow these steps to embed dashboard in your application

NOTE: We do support scrollable dashboards while embedding in your application.

How to use Bold BI wrapper inside your html page

  1. In your .html page, you need to add the following Embed SDK URL in the head tag of your page.

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

  2. In the body tag, you need to create the div element with your own id name. This element will be used for dashboard embedding.

    <body>
    <div id="dashboard_container"></div>
</body>

  3. In the body tag, you need to add the function to create BoldBI instance with following properties and call that function in the body using the onload attribute as follows. Also, call the loadDashboard() function.

    You can embed the dashboard using either the dashboard ID or dashboard path like in below samples.

Embed using dashboard ID

```js
<body onload="embedSample();">
    <div id="dashboard_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardId: "755e99c7-f858-4058-958b-67577b283309",                
                embedContainerId: "dashboard_container",// This should be the container id where you want to embed the dashboard
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.View,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDashboard();
        }
    </script>
</body>
```

Embed using dashboard path

```js
<body onload="embedSample();">
    <div id="dashboard_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardPath: "/Sales/Sales Analysis Dashboard",
                embedContainerId: "dashboard_container",// This should be the container id where you want to embed the dashboard
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.View,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDashboard();
        }
    </script>
</body>
```

  1. Refer the following table for value of the previous properties based on your application.

    serverUrl Use your Bold BI server url (http://localhost:[portno]/bi/site/site1)
    dashboardId Use item id of the dashboard, which need to be embed in your application.
    dashboardPath dashboardPath will be like `/{category_name}/{dashboard_name}` Use item id of the dashboard, which need to be embed in your application.
    embedContainerId Id of the created div element in your body.
    embedType BoldBI.EmbedType.Component
    environment BoldBI.Environment.Cloud or BoldBI.Environment.Enterprise
    height Height of the dashboard in your page
    width Width of the dashboard in your page
    authorizationServer Use your authorization URL
    expirationTime Token expiration time

  2. Copy the previous embedSample() function and paste in your page. You need to update your values to the properties.

NOTE: The embedContainerId should be the same as your div element id value.

NOTE: For Bold BI v5.2.48 or lower version, you must have add the following dependent scripts and also refer the below Embed SDK URL of respective Bold BI version.

https://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js

Bold BI Version Dependent Scripts
v5.2.48 or Lower 
<head>  
    <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="https://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js"></script>
    </head>
v5.3.53 
<head> 
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"></script>
</head>
v6.17.13(latest) 
<head> 
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.17.13/boldbi-embed.js"></script>
</head>

How to embed the Multi-tabbed dashboard

You can embed the multi-tabbed dashboard by using the dashboard ID or dashboard path which is similar to embedding a regular dashboard. Please refer to the following code sample for embedding a multi-tabbed dashboard


<body onload="embedSample();">
    <div id="dashboard_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardId: "119c6622-62e7-42d2-955a-55c938ab8583",  // Multi-tabbed dashboard id              
                embedContainerId: "dashboard_container",// This should be the container id where you want to embed the dashboard
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.View,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDashboard();
        }
    </script>
</body>

How to implement the authorize server with user mail or user name

  1. You need to implement authorization end point in your application. This will act as the bridge between your application and Bold BI server and also you need to update the secure details like email and group based access. Learn more about authorize server here.

  2. To create authorization-server action method, copy the following snippet in your controller. You can use currently logged in user email at user@domain.com or user name at username, but this user should have access to the dashboard.

    [HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
    // Use your user-email as embed_user_email
    embedQuerString += "&embed_user_email=user@domain.com";

    // Use your username as embed_user_email
    //embedQuerString += "&embed_user_email=username";

    //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
    double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
    embedQuery += "&embed_server_timestamp=" + timeStamp;

    var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);

    var embedDetailsUrl = "/embed/authorize?" + embedQuerString + embedSignature;

    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(dashboardServerApiUrl);
        client.DefaultRequestHeaders.Accept.Clear();

        var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
        string resultContent = result.Content.ReadAsStringAsync().Result;
        return resultContent;
    }
}

  3. Add the GetSignatureUrl method, and this method would be called from the previous GetEmbedDetails action. Follow the next section to get EmbedSecret key from Bold BI application.

    public string GetSignatureUrl(string queryString)
{
    // Get the embedSecret key from Bold BI.
    var embedSecret = "8apLLNabQisvriG2W1nOI7XWkl2CsYY";
    var encoding = new System.Text.UTF8Encoding();
    var keyBytes = encoding.GetBytes(embedSecret);
    var messageBytes = encoding.GetBytes(queryString);
    using (var hmacsha1 = new HMACSHA256(keyBytes))
    {
        var hashMessage = hmacsha1.ComputeHash(messageBytes);
        return Convert.ToBase64String(hashMessage);
    }
}

How to pass the Dashboard Parameter and URL Filter Parameter in the authorization end point dynamically

In the authorization end point, you can pass the both type of filters(Dashboard Parameter/Filter Parameter) at the same time.

To pass filters to the embed_datasource_filter parameter in the authorization endpoint, refer to the following sample in C#(It differs based on your platform language). Here, we have to set both types of filters to the embed_datasource_filter property in the endpoint.

[HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
    // Use your user-email as embed_user_email
    embedQuerString += "&embed_user_email=user@domain.com" + "&embed_datasource_filter=" + "[{&&Parameter=Value&Parameter=Value}]";

    //To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
    double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
    embedQuery += "&embed_server_timestamp=" + timeStamp;

    var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);

    var embedDetailsUrl = "/embed/authorize?" + embedQuerString + embedSignature;

    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(dashboardServerApiUrl);
        client.DefaultRequestHeaders.Accept.Clear();

        var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
        string resultContent = result.Content.ReadAsStringAsync().Result;
        return resultContent;
    }
}

  • The Dashboard Parameter filter must be started with a double ampersand && in the endpoint. Refer to this link for more details.

  • The URL Parameter filter must be started with a single ampersand & in the endpoint. Refer to this link for more details.

Refer to the following table for the value of the filter properties based on your filter.

Scenario Appending Query
If passing Dashboard Parameter only "&embed_datasource_filter=[{&&Parameter=Value}]"
If passing URL Parameter only "&embed_datasource_filter=[{&Parameter=Value}]"
If passing both Dashboard Parameter and URL Parameter "&embed_datasource_filter=[{&&Parameter=Value&Parameter=Value}]"

NOTE: Filter value should be enclosed with square and curly brackets as mentioned above.

How to get Embed Secret key from Bold BI application

You can get your Embed Secret key from administrator setting section. Refer this link for more details.

How to get common Embed Secret key from UMS

If you are using multi-tenant Bold BI server sites and looking for embedding the Dashboard in your application, then we recommend using the common embed secret instead of the separate embed secret for each site. Refer to this link to get the common embed secret.

NOTE: Refer to this link to resolve the jQuery conflict problem in embedded.

How to use Server URL for embedding the Bold BI in different scenarios

Get the Server URL of the respective Bold BI tenant from the following UMS sites management page.

Note: Site Management page is accessible only for the OnPremise or Enterprise deployment.

To open UMS page, open the OnPremise dashboard listing page, select the user profile in the side menu, then click the Manage sites (Admin access) option as follows.

GotoUMSPage

GetServerURL

Refer to the following table for using the server URL in different scenarios to embed the Bold BI.

ServerUrl - Combination of the rootURL and siteIdentifier.

Scenarios URL from UMS page Example Code
By default, Multi-tenancy enabled case https://example.boldbi.com/bi/site/site1 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bi" + "/" + "site/site1",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bi
siteIdentifier - “site/site1”
Multi-tenancy disabled case https://example.boldbi.com/bi 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bi",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bi

Hosted as one level sub application with Multi-tenancy enabled case https://example.boldbi.com/bold/bi/site/site1 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bold/bi" + "/" + "site/site1",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bi
Main application - https://example.boldbi.com/
Sub application - “bold/bi”
siteIdentifier - “site/site1”
Hosted as one level sub application with Multi-tenancy disabled case https://example.boldbi.com/bold/bi 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bold/bi",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bi
Main application - https://example.boldbi.com/”
Sub application - “bold/bi”
Hosted as two level sub application with Multi-tenancy enabled case https://example.boldbi.com/bold/test/bi/site/site1 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bold/test/bi" + "/" + "site/site1",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bold/test/bi
Main application -”https://example.boldbi.com/”
Sub applications - “bold/test/bi”
siteIdentifier - “site/site1”
Hosted as two level sub application with Multi-tenancy disabled case https://example.boldbi.com/bold/test/bi 
 var boldbiEmbedInstance = BoldBI.create({
    serverUrl: "https://example.boldbi.com/bold/test/bi",
 });
 boldbiEmbedInstance.loadDashboard();

rootURL - https://example.boldbi.com/bold/test/bi
Main application - https://example.boldbi.com/
Sub applications - “bold/test/bi”
Previous
Next