Follow these steps to embed a pinboard 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 pinboard.
<body>
<div id="pinboard_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 Bold BI instance with the following properties and call that function in the body using the onload attribute as follows. Additionally, call the loadPinboard() function.
You can embed the pinboard by using the pinboard name, as shown in the following samples.
<body onload="embedSample();">
<div id="pinboard_container"></div>
<script>
function embedSample() {
var boldbiEmbedInstance = BoldBI.create({
serverUrl: "http://localhost:51777/bi/site/site1",
pinboardName: "pinboardName",
embedContainerId: "pinboard_container",// This should be the container id where you want to embed the pinboard.
embedType: BoldBI.EmbedType.Component,
height: "800px",
width: "1200px",
authorizationServer: {
url: "http://example.com/embeddetail/get"
},
expirationTime: "100000",
});
boldbiEmbedInstance.loadPinboard();
}
</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.
Please refer to the following table for the values of the previous properties based on your application.
| serverUrl | Use your Bold BI server url. For Example, 1. On-premise - `http://localhost:[portno]/bi/site/site1` 2. Cloud - `https://[company].boldbi.com` |
| pinboardName | Use the pinboard name, which needs to be embed in your application. |
| embedContainerId | Id of the created div element in your body. |
| embedType | BoldBI.EmbedType.Component |
| height | Height of the pinboard in your page |
| width | Width of the pinboard in your page |
| authorizationServer | Use your authorization URL |
| expirationTime | Token expiration time |
Please copy the previous embedSample() function and paste it into your page. Remember to update your values to the appropriate properties.
NOTE: The embedContainerId should be the same as the value of your div element id.
NOTE: For Bold BI version v5.2.48 or lower, you must add the following dependent scripts and also refer to the Embed SDK URL of the 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 serve as the connection between your application and the Bold BI server. Additionally, you will need to update the secure details such as email and group-based access. To learn more about authorizing the server, please visit the following authorization server.
To create an authorization server action method, please copy the following sample code into your controller. You can use the email of the currently logged-in user, which can be user@domain.com , or the username. However, please ensure that this user has write access to the pinboard.
[HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
// Use your user-email as embed_user_email
embedQuerString += "&embed_user_email=user@domain.com";
// Use your 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;
}
}Please add the GetSignatureUrl method, and this method should be called from the previous GetEmbedDetails action. Please refer to the next section for obtaining 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);
}
}In the authorization endpoint, you can pass both types of filters (Dashboard Parameter/Filter Parameter) simultaneously.
To pass filters to the embed_datasource_filter parameter in the authorization endpoint, refer to the following sample in C# (the syntax may vary depending on your platform language). In this case, we need to set both types of filters to the embed_datasource_filter property in the endpoint.
[HttpPost]
[Route("embeddetail/get")]
public string GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
// Use your user-email as embed_user_email
embedQuerString += "&embed_user_email=user@domain.com" + "&embed_datasource_filter=" + "[{&&Parameter=Value&Parameter=Value}]";
//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;
}
}The Dashboard Parameter filter must be started with a double ampersand && in the endpoint. Please refer to the configuring dashboard parameters for more details.
The URL Parameter filter must be started with a single ampersand & in the endpoint. Please refer to the URL Filter for more details.
Please refer to the following table for the value of the filter properties based on your filter.
| Scenario | Appending Query |
|---|---|
| If passing Dashboard Parameter only | "&embed_datasource_filter=[{&&Parameter=Value}]" |
| If passing URL Parameter only | "&embed_datasource_filter=[{&Parameter=Value}]" |
| If passing multiple Dashboard Parameters | "&embed_datasource_filter=[{&&Parameter=Value&&Parameter1=Value1}]" |
| If passing multiple URL Parameters | "&embed_datasource_filter=[{&Parameter=Value&Parameter1=Value1}]" |
| If passing both Dashboard Parameter and URL Parameter | "&embed_datasource_filter=[{&&Parameter=Value&Parameter=Value}]" |
| If passing both URL Parameter and Dashboard Parameter | "&embed_datasource_filter=[{&Parameter=Value&&Parameter=Value}]" |
NOTE:
- The filter value should be enclosed within both square brackets and curly brackets, as mentioned above.
- The filter value should be applied to all widgets on a pinboard, and it does not affect any specific widget.
You can obtain your Embed Secret key from the administrator settings section. Please refer to the Embed Settings for further information.
If you are using multi-tenant Bold BI server sites and are looking to embed the Pinboard in your application, we recommend using the common embed secret instead of a separate embed secret for each site. Please refer to this link to obtain the common embed secret.