Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed Authentication for the Multi Tab Dashboard Viewer

This section outlines how to embed a multitab dashboard programmatically from a Bold BI dashboard using authorization server authentication.

Note: To embed the multitab dashboard using Bold BI Server version from 10.1.18, it is necessary to use the corresponding CDN link: https://cdn.boldbi.com/embedded-sdk/v10.1.18/boldbi-embed.js. If you are using a Bold BI Server version lower than 10.1.18, you can use the CDN link: https://cdn.boldbi.com/embedded-sdk/v9.1.73/boldbi-embed.js.

How to Embed a Bold BI multitab dashboard programmatically Using JavaScript

  1. Include the Bold BI Embed SDK in the <head> tag of your HTML page.

  2. Create a <div> element in the <body> tag with a unique ID to serve as the dashboard container.

    <head>
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v12.1.5/boldbi-embed.js"></script>
</head>
<body>
    <div id="embed_container"></div>
</body>

  3. Define functions in the <body> to create a Bold BI instance. Use the onload attribute to initialize the embedding process securely with user-specific access.

Embed a multitab dashboard programmatically

You can embed a multitab dashboard programmatically in two ways:

  • Using the Dashboard Ids

       <body onload="embedSample();">
        <div id="embed_container"></div>
        <script>
            function embedSample() {
                var boldbiEmbedInstance = BoldBI.create({
                    serverUrl: "https://boldbi/site/site1",
                    dashboardIds: ["9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87","7f1ba4ee-2fcc-40f1-b2fc-a69de4dee522"], // The Ids of the dashboards that you want to embed.
                    embedContainerId: "embed_container",
                    authorizationServer: {
                        url: "https://boldbi/embeddetail/get"
                    }
                });
                boldbiEmbedInstance.loadMultitabDashboard(); // <-- Update this line
            }
        </script>
    </body>

  • Using Dashboard Paths

    <body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "https://boldbi/site/site1",
                dashboardPaths: ["/Sales/Market Sales Dashboard","/Support/Support Analysis Dashboard"], // The paths of the dashboard that you want to embed.
                embedContainerId: "embed_container",
                authorizationServer: {
                    url: "https://boldbi/embeddetail/get"
                }
            });
            boldbiEmbedInstance.loadMultitabDashboard(); // <-- Update this line
        }
    </script>
</body>

Supported Authentication

Note: For more information on Multi tab members, methods, and events, refer to this link

Previous
Next