Documentation
Demos
Support
Blog
Schedule Free Demo
Search results

Steps to embed the dashboard designer in your application

Follow these steps to embed dashboard designer in your application.

How to use BoldBI wrapper inside your html page

  1. In your .html page, you need to add the following dependent scripts in the head tag of your page.
<head>  
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.0-beta/jsrender.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v4.1.36/embed-js.js"></script>
</head>
  1. In the body tag, you need to create the div element with your own id name. This element will be used for dashboard designer embedding.
<body>
    <div id="dashboard-container"></div>
</body>
  1. In the body tag, you need to add the function to create BoldBI instance with following properties and call that function in the body using the onload attribute as follows. Also, call the loadDesigner() function.

You can edit the dashboard in embedded designer using either dashboard ID or dashboard path like in below samples.

Embed using dashboard ID

<body onload="embedSample();">
    <div id="dashboard-container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardId: "755e99c7-f858-4058-958b-67577b283309",                
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>

Embed using dashboard path

<body onload="embedSample();">
    <div id="dashboard-container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                dashboardPath: "/Sales/Sales Analysis Dashboard",
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>

Creating draft dashboard in designer embedding

If you do not specify none of the dashboard ID or dashboard path, then the server will automatically create a new draft dashboard. The embedded user needs to have dashboard create permission to create draft in designer embedding.

<body onload="embedSample();">
    <div id="dashboard-container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>

Creating draft dashboard with existing datasource in designer embedding

When creating a draft in designer embedding, if you specify either existing datasource ID or datasource name, the draft will use that existing datasource selected by default.

Draft with datasource ID

<body onload="embedSample();">
    <div id="dashboard-container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                datasourceId: "895e99c7-f858-4058-958b-67577b283345",
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>

Draft with datasource name

<body onload="embedSample();">
    <div id="dashboard-container"></div>
    <script>
        function embedSample() {
            var boldbiEmbedInstance = BoldBI.create({
                serverUrl: "http://localhost:51777/bi/site/site1",
                datasourceName: "Northwind Datasource",
                embedContainerId: "dashboard-container",// This should be the container id where you want to embed the dashboard designer
                embedType: BoldBI.EmbedType.Component,
                environment: BoldBI.Environment.Enterprise,
                mode: BoldBI.Mode.Design,
                height: "800px",
                width: "1200px",
                authorizationServer: {
                    url: "http://example.com/embeddetail/get"
                },
                expirationTime: "100000",
            });
            boldbiEmbedInstance.loadDesigner();
        }
    </script>
</body>
  1. Refer the following table for value of the previous properties based on your application.
serverUrl Use your Bold BI server url (http://localhost:[portno]/bi/site/site1)
dashboardId Use item id of the dashboard, which needs to be edited in embedded designer in your application.
dashboardPath dashboardPath will be like `/{category_name}/{dashboard_name}` Use item id of the dashboard, which needs to be edited in embedded designer in your application.
datasourceId Use existing datasource ID to use it in draft dashboard on embedded designer in your application.
datasourceName Use existing datasource name to use it in draft dashboard on embedded designer in your application.
embedContainerId Id of the created div element in your body.
embedType BoldBI.EmbedType.Component
environment BoldBI.Environment.Cloud or BoldBI.Environment.Enterprise
height Height of the dashboard designer in your page
width Width of the dashboard designer in your page
authorizationServer Use your authorization URL
expirationTime Token expiration time
  1. Copy the previous embedSample() function and paste in your page. You need to update your values to the properties.

NOTE: embedContainerId should be same as your div element id value

How to implement the authorize server with user mail

  1. You need to implement authorization end point in your application. This will act as the bridge between your application and Bold BI server and also you need to update the secure details like email and group based access. Learn more about authorize server here.

  2. To create authorization-server action method, copy the following snippet in your controller. You can use currently logged in user email at user@domain.com, but this user should have write access to the dashboard. 

        [HttpPost]
        [Route("embeddetail/get")]
        public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
        {
            // User your user-email as embed_user_email
            embedQuerString += "&embed_user_email=user@domain.com";

            var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString.ToLower());

            var embedDetailsUrl = "/embed/authorize?" + embedQuerString.ToLower() + embedSignature;

            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(dashboardServerApiUrl);
                client.DefaultRequestHeaders.Accept.Clear();

                var result = client.GetAsync(dashboardServerApiUrl + embedDetailsUrl).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                return resultContent;
            }
        }
  1. Add the GetSignatureUrl method, and this method would be called from the previous GetEmbedDetails action. Follow the next section to get EmbedSecret key from Bold BI application.
        
        public string GetSignatureUrl(string queryString)
        {
            // Get the embedSecret key from Bold BI.
            var embedSecret = "8apLLNabQisvriG2W1nOI7XWkl2CsYY";
            var encoding = new System.Text.UTF8Encoding();
            var keyBytes = encoding.GetBytes(embedSecret);
            var messageBytes = encoding.GetBytes(queryString);
            using (var hmacsha1 = new HMACSHA256(keyBytes))
            {
                var hashMessage = hmacsha1.ComputeHash(messageBytes);
                return Convert.ToBase64String(hashMessage);
            }
        }

How to get Embed Secret key from Bold BI application

You can get your Embed Secret key from administrator setting section. Refer this link for more details.

How to get common Embed Secret key from UMS

If you are using multi-tenant Bold BI server sites and looking for embedding the Designer in your application, then we recommend using the common embed secret instead of the separate embed secret for each site. Refer to this link to get the common embed secret.

NOTE: This embed setting will be enabled only if you have an Embedded BI plan.

Previous
Next