Documentation
Demos
Support
Blog
Start Free Trial
Search results

Embed Authentication for the Dashboard Views Embedding

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

How to embed Bold BI Dashboard Views using Javascript

To embed the Views 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 views.

  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 View

You can embed a view in two ways:

  • Using the View ID

    <body onload="embedSample();">
    <div id="embed_container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardId: "9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87",
                viewId: "894b8ddb-606f-4acd-8c53-8ccdcaa92a98",
                embedContainerId: "embed_container",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                }
            });
            boldbiEmbedInstance.loadView(); // Load view using view ID
        }
    </script>
</body>

    Note: Dashboard Id and path is optional while setting view Id for calling loadView method.

  • Using View Name

     <body onload="embedSample();">
 	<div id="embed_container"></div>
 	<script>
 		function embedSample() {
 			var boldbiEmbedInstance = BoldBI.create({
 				serverUrl: "http://localhost:51777/bi/site/site1",
 				dashboardId: "9a4b8ddb-606f-4acd-8c53-8ccdcaa92a87",
 				viewName: "embed-view",
 				embedContainerId: "embed_container",
 				authorizationServer: {
 					url: "http://example.com/embeddetail/get"
 				}
 			});
 			boldbiEmbedInstance.loadView(); // Load view using view name
 		}
 	</script>
 </body>

    Note: Dashboard Id must be specified in the options if you are using view name to embed a Dashboard view.

For more information on view members, methods, and events, refer to this link.

Supported Authentication

How to get view details of a dashboard

  1. In Bold BI Server, click the context menu of the respective dashboard and choose the Views option. EmbedusingViewname

    NOTE: You can get the views list of specific dashboard using getViewsByDashboardId method of SDK.

  2. You can find all the views name for the respective dashboard from the displayed list. EmbedusingViewname

  3. To get a view’s ID click on the respective view. The dashboard will be loaded in a new tab with the chosen view. You can find the view ID at the end of URL. Refer to the image below. EmbedusingViewId

Previous
Next