Follow these steps to embed dashboard designer in your application.
<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="http://cdn.boldbi.com/embedded-sdk/v3.3.40/embed-js.js"></script>
</head>
<body>
<div id="dashboard-container"></div>
</body>
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.
<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>
<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>
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>
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.
<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>
<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>
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 |
NOTE: embedContainerId should be same as your div element id value
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.
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;
}
}
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. Refer this link for more details.
NOTE: This setting will be enabled only if you have Embedded BI plan.