Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed a Dashboard Designer using an Embed Token

This section outlines the process of embedding the Bold BI Dashboard designer using an embed token. If your users need the capability to create and modify dashboards within your embedding application.

Note: Before exploring the embedded dashboard designer, it is recommended to first learn how to generate Embed Authorization tokens and review the Embedding Dashboards to understand the process of embedding dashboards in view mode.

After embedding dashboards in view mode using Embed authorization token, you can easily extend the configuration to enable specific end users to access the embedded dashboard designer within your application. The following considerations are essential for the embedded dashboard designer:

  • Ensure the user being embedded has edit/design permissions for the relevant dashboards and data sources.

  • Configure the mode property in your frontend application to BoldBI.Mode.Design and call loadDesigner method in order to render the dashboard in the appropriate designer mode.

Steps to Embed the Dashboard Designer

Refer to this SDK installation to install into your embedding application.

In this step, we will utilize the Embed token generated on the server side to securely integrate a dashboard designer into your frontend application using the embed SDK.

Important: Embed token generation occurs on the server side, and the embedSecret is extremely sensitive. It plays an vital level here. Never expose this key to anyone or any publicly accessible location. It must only be stored and used on your backend server to sign embedding requests.

Insert a div element with a distinct ID to act as the dashboard container. Then initialize the Bold BI instance and invoke it. This approach guarantees secure dashboard loading tailored to individual user access. Set mode: BoldBI.Mode.Design inside the create() method and call loadDesigner() to render the dashboard in designer mode for authorized users.

    <div id="dashboard_container_id"></div>
    <script>
        var boldbiEmbedInstance = BoldBI.create({
            serverUrl: "< Bold BI Server URL >",
            dashboardId: "< Dashboard Id >",
            mode: BoldBI.Mode.Design,
            embedContainerId: "< Embed Container Id >", // ID of the div where dashboard designer will render
            embedToken: "< Embed token generated from server end >"
        });
        boldbiEmbedInstance.loadDesigner();  
    </script>

Note: The same Embed Token can be utilized for both the dashboard and the designer, provided that the dashboard remains unchanged.

Property Type Description
serverUrl string Use your Bold BI Server URL (e.g., http://localhost:[portno]/bi/site/site1)
dashboardId string Set the item ID of the dashboard you want to embed.
mode enum Use design mode to load the dashboard designer.
embedContainerId string Use the Id of the div element where the dashboard will render.
embedToken string Utilize the Embed Token which is created in the backend.

Note: For more features on the designer with additional members, methods, and events, refer to the Designer Component Reference.

Previous
Next