Embed the Bold BI Modules into Your Application Through JavaScript Embedding

In Bold BI JavaScript Embedding we could be able to embed almost all the modules available in the Bold BI application. This article will guide you on how to achieve this. Below you can find the modules that can be embedded into your application.

• Dashboard View
• Create Dashboard
• Edit Dashboard
• Create Data source
• Edit Data source
• Widget Embedding
• Pinboard Embedding

Here are the different modules of Bold BI with respective code snippets that can be used to embed into your application using JavaScript Embedding:

1. Dashboard View: This module allows you to embed a dashboard view into your application. Please refer to the below code snippet to embed dashboards in view mode. You can learn more about it here.

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 designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }

2. Create Dashboard: This module allows you to create a dashboard within your application. Here same code snippet like dashboard view can be used but you need to make some mandatory changes like in below code snippet. Since we are creating a dashboard there is no need to provide the dashboardId JavaScript API, then you need to provide the mode API of value BoldBI.Mode.Design and then change the method as “loadDesigner” to embed the dashboard create mode. You can learn more about it here.

 function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                embedContainerId: "dashboard_container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }

3. Edit Dashboard: This module allows you to edit a dashboard within your application. You can utilize the code snippet of a “create dashboard”. In addition to that we need to add the JavaScript API dashboardId and its value as a string type since we are editing a particular dashboard. You can learn more about it here.

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 designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }

4. Create Data Source: This module allows you to create a data source within your application. Please utilize the below code snippet to create a data source. You can learn more about it here.

function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                embedContainerId: "datasource_container",// This should be the container id where you want to embed the datasource
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Connection,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDatasource();
        }

5. Edit Data Source: This module allows you to edit a data source within your application. You can utilize the same code snippet of “Create data source”, but you need to add the datasouceId JavaScript API and its value in a string format, with the mode value as BoldBI.Mode.DataSource You can learn more about it here.

function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                datasourceId: "755e99c7-f858-4058-958b-67577b283309",                
                embedContainerId: "datasource_container",// This should be the container id where you want to embed the datasource
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.DataSource,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDatasource();
        }

6. Widget Embedding: This module allows you to embed a widget into your application. You can embed the widget of a particular dashboard either using a Widget Id or a Widget name., The below code demonstrates how to embed the Widget using a Widget Id. If you would like to embed using a Widget name replace the Widget Id with a Widget name. You can learn more about it here.

function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardId: "9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87",
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                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.loadDashboardWidget("efbf2999-f7e7-4831-a492-53c4df394af0");
        }

7. Pinboard Embedding: This module allows you to embed a pinboard into your application. You can embed the pinboard using the code snippet below. You can learn more about it here.

function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                pinboardName: "pinboardName",                
                embedContainerId: "pinboard_container",// This should be the container id where you want to embed the pinboard.
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadPinboard();
        }

Note: The values of serverUrl,dashboardId, datasourId,widgetId, PinboardName and authorizationServer.url must be replaced by your respective values.

Additionally, we can embed the on-premise Bold BI application into your application please refer to the help documentation to know more about it. However, it is not possible to embed the entire cloud tenant into your application, but you can embed specific modules of Bold BI into your application for both cloud and on-premise tenants using the above-specified techniques.

Obtaining lists of Dashboards and Data Sources from the Bold BI

If you would like to list the dashboards and data source as in the Bold BI server, you can achieve that by below APIs.

To obtain a list of dashboards from the Bold BI server, you can refer to this link.

To obtain a list of data sources from the Bold BI server, you can refer to this link.

References

1. To know more about JavaScript Embedding
2. Different platform embedding sample applications