Through this process, you can embed a multi-tab dashboard programmatically by using either dashboardIds or dashboardPaths. Please note that these programmatically generated multi-tab dashboards are temporary and can be created without directly accessing the BoldBI application.
Follow these steps to embed a programmatically created multi-tab dashboard into your application.
In your .html page, you need to add the lasted Embed SDK URL in the head tag of your page.
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v8.1.41/boldbi-embed.js"></script>
</head>Create the div element with your ID name in the body tag. This element will be used for programmatic multi-tab dashboard embedding.
<body>
<div id="dashboard_container"></div>
</body>NOTE: If you use hyphens in ID, your code may become more prone to errors and be harder to read while using Jquery. Instead, use underscores or camelCase if you are in control of the ID.
In the body tag, you need to add the function to create a BoldBI instance with the following properties and call that function in the body using the onload attribute. Also, call the loadMultitabDashboard() function.
You can embed the programmatic multi-tab dashboard using either dashboard IDs or dashboard Paths like in the below samples.
<body onload="embedSample();">
<div id="dashboard_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: "dashboard_container",// This should be the container id where you want to embed the programmatically created multi-tab dashboard.
authorizationServer: {
url: "https://boldbi/embeddetail/get"
}
});
boldbiEmbedInstance.loadMultitabDashboard();
}
</script>
</body><body onload="embedSample();">
<div id="dashboard_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: "dashboard_container",// This should be the container id where you want to embed the programmatically created multi-tab dashboard.
authorizationServer: {
url: "https://boldbi/embeddetail/get"
}
});
boldbiEmbedInstance.loadMultitabDashboard();
}
</script>
</body>Note: Please ensure that dashboardIds only contains Ids of individual dashboard, dashboardPaths only contains paths of individual dashboard and do not provide the Id or path of an existing multi-tab dashboard.
NOTE: By default,
BoldBI.Environment.Enterpriseis used for the Environment API member. For Cloud sites, you must set the Environment member value toBoldBI.Environment.Cloud.
Refer to the following table for the value of the previous properties based on your application.
| serverUrl | Use your Bold BI server url (http://localhost:[portno]/bi/site/site1) |
| dashboardIds | Use the item IDs of individual dashboards in the form of an array, which need to be embedded in your application |
| dashboardPaths | Use the paths of individual dashboards in the form of an array, which need to be embedded in your application. Consider using the format /{category_name}/{dashboard_name} for the dashboardPath. |
| embedContainerId | Id of the created div element in your body. |
| environment | BoldBI.Environment.Cloud or BoldBI.Environment.Enterprise |
| height | The height is an optional member of the API. If you do not specify a height for the API, it will automatically take the dimensions of your embedding container. If no value is provided, it will inherit the height from the dimensions of the parent container of the embedding. For more details please refer to this link here. |
| width | The width is an optional member of the API. If you do not specify a width for the API, it will automatically take the dimensions of your embedding container. If no value is provided, it will inherit the width from the dimensions of the parent container of the embedding. For more details please refer to this link here. |
| authorizationServer | Use your authorization URL |
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.
Bold BI Version |
Dependent Scripts |
|---|---|
v8.1.41(latest) |
|
v5.3.53 |
|
v5.2.48 or Lower |
|
Implement an authorization endpoint in your application. This will bridge your application and the Bold BI server and update secure details like email and group-based access. You can learn more about the authorization server.
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 or user name at username, but this user should have access to the dashboard.
[HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
// Use the user-email as embed_user_email
embedQuerString += "&embed_user_email=user@domain.com";
// Use the username as embed_user_email
//embedQuerString += "&embed_user_email=username";
//To set embed_server_timestamp to overcome the EmbedCodeValidation failing while different timezone using at client application.
double timeStamp = (int)DateTime.UtcNow.Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
embedQuery += "&embed_server_timestamp=" + timeStamp;
var embedSignature = "&embed_signature=" + GetSignatureUrl(embedQuerString);
var embedDetailsUrl = "/embed/authorize?" + embedQuerString + 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;
}
}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);
}
}
You can get your Embed Secret key from administrator setting section. Please refer to the Embed Settings for further information.
If you are using multi-tenant Bold BI server sites and looking for embedding the programmatic multi-tab dashboard 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.