How to create and edit dashboards in embedded application?

1. We have embedded samples on different platforms, you can download them from the help documentation. In the provided sample, by default, the dashboard renders in view mode. To create the dashboard using the downloaded sample, change the BoldBI.create() method like in the below code snippet.



function renderDashboard() {
​    this.dashboard = BoldBI.create({
        serverUrl: rootUrl + "/" + siteIdentifier,
        embedContainerId: "dashboard",
        mode: BoldBI.Mode.Design,
        embedType: BoldBI.EmbedType.Component,
        environment: environment == "enterprise" ? BoldBI.Environment.Enterprise : BoldBI.Environment.Cloud,
        width: "100%",
        height: "100%",
        expirationTime: 10000,
        authorizationServer: {
            url: authorizationServerUrl
        }
    });
    console.log(this.dashboard);
    this.dashboard.loadDesigner();
};

           

1. To edit the dashboard in an embedded application, get the dashboard ID from the Bold BI server and provide this value in "dashboardId" API then change the renderDashboard() method like in the below code snippet.

function renderDashboard() {
​    this.dashboard = BoldBI.create({
        serverUrl: rootUrl + "/" + siteIdentifier,
        dashboardId:"367298c3-473d-4c53-aef0-ff91099945a2",
        embedContainerId: "dashboard",
        mode: BoldBI.Mode.Design,
        embedType: BoldBI.EmbedType.Component,
        environment: environment == "enterprise" ? BoldBI.Environment.Enterprise : BoldBI.Environment.Cloud,
        width: "100%",
        height: "100%",
        expirationTime: 10000,
        authorizationServer: {
            url: authorizationServerUrl
        }
    });
    console.log(this.dashboard);
    this.dashboard.loadDesigner();
};

            

• To know more about different JavaScript embedding, data source embedding, pinboard embedding, and widget embedding.