How to Embed Bold BI Dashboards Using JavaScript Embedding with Optimal Parameters?

Bold BI provides a straightforward way to embed dashboards using JavaScript with minimal code. This guide outlines the essential parameters and a sample code snippet to help you get started.

Mandatory Parameters

When using the BoldBI.create() method, the following parameters are mandatory:

• serverUrl: The URL of the Bold BI server.
• dashboardId: The unique identifier of the dashboard you want to embed.
• embedContainerId: The ID of the HTML container where the dashboard will be displayed.
• token: Access token generated either using REST API or using Personal access token, you refer the KB article to get more information about this token member API.

Optional Parameters

In addition to the mandatory parameters, the following parameters can be specified as optional:

• height: The height of the embedded dashboard. If not specified, it will default to the inline style or the parent container’s height.
• width: The width of the embedded dashboard. Similar to height, it defaults to the inline style or the parent container’s width.
• embedType: Defines the type of embedding (e.g., view mode).
• expirationTime: The time in seconds for which the embed token is valid. The default is 86400 seconds (1 day).
• mode: Specifies the mode in which the dashboard will be rendered.

Sample Code

Here is a sample code snippet to embed a dashboard using the JavaScript embedding technique:

function renderDashboard() {
    var boldbiEmbedInstance = BoldBI.create({
        serverUrl: "http://localhost:51777/bi/site/site1",
        dashboardId: "755e99c7-f858-4058-958b-67577b283309",                
        embedContainerId: "dashboard_container", // Container ID for the dashboard
        token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImRldm9wc0Bib2xkYmkuY29tIiwidXBuIjouYm9sZGJpZGVtby5jb20vYmkvc2l0ZS9zaXRlMSIsImF1ZCI6Imh0dHBzOi8vaG90Zml4LXdpbmRvd3MuYm9sZGJpZGVtby5jb20vYmkvc2l0ZS9zaXRlMSJ9.JzbqVr6Brv1mAEvnbHnE-FuShos", // Use the generated Access token by any one of the above methods.
    });
    boldbiEmbedInstance.loadDashboard();
}

Notes

• By default, the dashboard will be rendered in view mode.
• Ensure that the Environment parameter is set correctly; by default, the on-premise environment will be set to BoldBI.Environment.Enterprise. For on-premise environments, you do not need to mention it explicitly, and for cloud sites, use BoldBI.Environment.Cloud.

Additional References

• JavaScript Embedding
• JavaScript API Reference