Please follow these steps to embed a data source in your application.
In your .html page, you need to add the following Embed SDK URL in the head tag of your page.
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v7.11.24/boldbi-embed.js"></script>
</head>In the body tag, you need to create the div element with your own id name. This element will be used for embedding a data source.
<body>
<div id="datasource_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 that creates a BoldBI instance with the following properties and call that function in the body using the onload attribute as shown. Additionally, call the loadDatasource() function.
You can embed the data source using either the data source ID or data source name, as shown in the following code samples.
<body onload="embedSample();">
<div id="datasource_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: "http://localhost:51777/bi/site/site1",
datasourceId: "755e99c7-f858-4058-958b-67577b283309",
embedContainerId: "datasource_container",// This should be the container id where you want to embed the datasource
embedType: BoldBI.EmbedType.Component,
mode: BoldBI.Mode.DataSource,
height: "800px",
width: "1200px",
authorizationServer: {
url: "http://example.com/embeddetail/get"
},
expirationTime: "100000",
});
boldbiEmbedInstance.loadDatasource();
}
</script>
</body>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.
<body onload="embedSample();">
<div id="datasource_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: "http://localhost:51777/bi/site/site1",
datasourceName: "Datasource Name",
embedContainerId: "datasource_container",// This should be the container id where you want to embed the datasource
embedType: BoldBI.EmbedType.Component,
mode: BoldBI.Mode.DataSource,
height: "800px",
width: "1200px",
authorizationServer: {
url: "http://example.com/embeddetail/get"
},
expirationTime: "100000",
});
boldbiEmbedInstance.loadDatasource();
}
</script>
</body>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="datasource_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: "http://localhost:51777/bi/site/site1",
embedContainerId: "datasource_container",// This should be the container id where you want to embed the datasource
embedType: BoldBI.EmbedType.Component,
mode: BoldBI.Mode.Connection,
height: "800px",
width: "1200px",
authorizationServer: {
url: "http://example.com/embeddetail/get"
},
expirationTime: "100000",
});
boldbiEmbedInstance.loadDatasource();
}
</script>
</body>Please refer to the following table for the values of the previous properties based on your application.
| serverUrl | Use your Bold BI server url (http://localhost:[portno]/bi/site/site1) |
| datasourceId | Use item id of the datasource, which needs to be edited in embedded datasource in your application. |
| datasourceName | Use datasource name of the datasource, which needs to be edited in embedded datasource in your application. |
| embedContainerId | Id of the created div element in your body. |
| embedType | BoldBI.EmbedType.Component |
| height | Height of the datasource designer in your page |
| width | Width of the datasource designer in your page |
| authorizationServer | Use your authorization URL |
| expirationTime | Token expiration time |
Copy the previous embedSample() function and paste it on your page. Make sure to update the values to the appropriate properties.
NOTE: The embedContainerId should be the same as the value of your div element id.
NOTE: To use Bold BI v5.2.48 or a lower version, you need to include the following dependent scripts and refer to the Embed SDK URL of respective Bold BI version.
https://cdn.boldbi.com/embedded-sdk/v5.2.48/embed-js.js
Bold BI Version |
Dependent Scripts |
|---|---|
v5.2.48 or Lower |
|
v5.3.53 |
|
v7.11.24(latest) |
|
You need to implement an authorization endpoint in your application. This endpoint will act as the bridge between your application and the Bold BI server. Additionally, you need to up-date the secure details such as email and group-based access. Learn more about the authorization server.
To create an authorization-server action method, copy the following snippet into your con-troller. You can use either the currently logged in user’s email at user@domain.com or their username, but this user must have 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";
// Use your user-email 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;
}
}Please add the GetSignatureUrl method, and this method will be called from the previous GetEmbedDetails action. Refer to the following section to obtain the EmbedSecret key from the 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 obtain your Embed Secret key from the administrator settings section. Please refer to the Embed Settings for additional information.
If you are using multi-tenant Bold BI server sites and want to embed the designer in your application, we recommend using the common embed secret instead of a separate embed secret for each site. You can refer to this link to obtain the common embed secret.