Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed Authentication for the Datasource Embedding

This section explains how to embed the Bold BI Designer Dashboard using Authorization Server Authentication.

How to embed Bold BI Datasource using Javascript

To embed the Datasource securely in your application, you can use the JavaScript SDK along with an authorization server. This method ensures that only authenticated users can access and interact with the embedded datasource.

  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 an Existing Data Source

You can embed an existing data source in two ways:

  • Using the Data Source Name

        <body onload="embedSample();">
        <div id="embed_container"></div>
        <script>
            function embedSample() {
                var boldbiEmbedInstance = BoldBI.create({
                    serverUrl: "http://localhost:51777/bi/site/site1",
                    datasourceName: "Embed",
                    embedContainerId: "embed_container",
                    mode: BoldBI.Mode.DataSource, 
                    authorizationServer: {
                        url: "http://example.com/embeddetail/get"
                    }
                });
                boldbiEmbedInstance.loadDatasource(); // Use data source name
            }
        </script>
    </body>

  • Using the DataSource Id

        <body onload="embedSample();">
        <div id="embed_container"></div>
        <script>
            function embedSample() {
                var boldbiEmbedInstance = BoldBI.create({
                    serverUrl: "http://localhost:51777/bi/site/site1",
                    datasourceId: "9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87",
                    embedContainerId: "embed_container",
                    mode: BoldBI.Mode.DataSource, 
                    authorizationServer: {
                        url: "http://example.com/embeddetail/get"
                    }
                });
                boldbiEmbedInstance.loadDatasource(); // Pass datasourceId id
            }
        </script>
    </body>

Create a New Data Source in Embedding

  • If you need to create a new data source in embedding, set the mode as connection as shown in the following examples and call the loadDatasource() function. The embedded user must have permission to create data sources in data source embedding.

    <body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                embedContainerId: "embed_container",
                mode: BoldBI.Mode.Connection, 
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                }
            });
            boldbiEmbedInstance.loadDatasource(); 
        }
    </script>
</body>

Supported Authentication

Note: For more information on data source members, methods, and events, refer to this link.

Previous
Next