A GitHub link has been provided to get the sample application, which demonstrates dashboard rendering with a list of dashboards available in your Bold BI server and is followed by steps to create a new embedding application in the ASP.NET MVC
on your own.
NOTE: The best way to get started would be reading the Getting Started section of the documentation to start using first. The
Getting Started
guide gives you enough information that you need to know before working on the sample.
Please get the ASP.NET MVC sample.
In the ASP.NET MVC sample, you could find the EmbedProperties
class file in the Models folder.
RootUrl | Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi) |
SiteIdentifier | For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be empty string. |
Environment | Your Bold BI application environment. (If Cloud, you should use cloud, if Enterprise, you should use enterprise) |
UserEmail | UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list |
UserPassword | Password of the Admin in Bold BI, which would be used to get the dashboards list |
EmbedSecret | You could get your EmbedSecret key from Embed tab by enabling Enable embed authentication in Administration page |
Then, run your ASP.NET MVC sample.
Dashboard can be rendered in design mode or create with below changes in renderDashboard()
method,
function renderDashboard(dashboardId) {
var dashboard = BoldBI.create({
serverUrl: "http://localhost:5000/bi/site/site1",
dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property
embedContainerId: "dashboard",
embedType: BoldBI.EmbedType.Component,
environment: "enterprise",
width: "100%",
height: "100%",
mode: BoldBI.Mode.Design,
expirationTime: 100000,
authorizationServer: {
url: "/GetDetails"
}
});
dashboard.loadDesigner();
};
NOTE: To mitigate issues related to NuGet packages, run the following command in package manager console
Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r
.
<meta charset="utf-8"/>
<table>
<tbody>
<tr>
<td align="left">serverUrl</td>
<td align="left">Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1)</td>
</tr>
<tr>
<td align="left">dashboardId</td>
<td align="left">Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard.</td>
</tr>
<tr>
<td align="left">embedContainerId</td>
<td align="left">Container Id in which dashboard renders.It should not contain hypen.</td>
</tr>
<tr>
<td align="left">mode</td>
<td align="left">In which mode you want to render dashboard. It can either be 'View' or 'Design' mode. </td>
</tr>
<tr>
<td align="left">expirationTime</td>
<td align="left">Set the duration for the token to be alive.</td>
</tr>
<tr>
<td align="left">authorizationServer</td>
<td align="left">Url of the 'GetDetails' action in the application.</td>
</tr>
</tbody>
</table>
Based on the values provided in the EmbedProperties.cs
, we would get the user token and validate it, and then we could get the dashboards list from the server.
In HomeController.cs
, we have added the GetToken()
method and GetDashboards()
action, which has been called when initializing the DOM in Index.html
.
GetEmbedDetails
action with the provided EmbedProperties
values.SignatureUrl
with the provided EmbedSecret key
and validate embed details in Bold BI. Then only, the dashboard would be rendered in the viewer-section of Index.cshtml
.Create
new project.
3. Change the project name as you want, and then click Create.
4. Choose MVC and Web API, and then click OK.
Under model folder create EmbedProperties.cs
class to define the mandatory properties like below,
public class EmbedProperties
{
public static string RootUrl = "http://localhost:5000/bi";//Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)
public static string SiteIdentifier = "site/site1";//For Bold BI Enterprise edition, it should be like <code>site/site1</code>. For Bold BI Cloud, it should be empty string.
public static string Environment = "enterprise";//Your Bold BI application environment.
public static string UserEmail = "";//UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list.
public static string UserPassword = "";//Password of the Admin in Bold BI, which would be used to get the dashboards list
public static string EmbedSecret = "";//You could get your EmbedSecret key from Embed tab by enabling `Enable embed authentication` in Administration page(https://help.boldbi.com/embedded-bi/site-administration/embed-settings/).
}
Create model class as DataClass.cs
to define below properties. These properties are used to get dashboard list from server.
[DataContract]
public class EmbedClass
{
[DataMember]
public string embedQuerString { get; set; }
[DataMember]
public string dashboardServerApiUrl { get; set; }
}
public class TokenObject
{
public string Message { get; set; }
public string Status { get; set; }
public string Token { get; set; }
}
public class Token
{
[JsonProperty("access_token")]
public string AccessToken {get;set;}
[JsonProperty("token_type")]
public string TokenType {get;set; }
[JsonProperty("expires_in")]
public string ExpiresIn {get; set;}
[JsonProperty("email")]
public string Email {get;set;}
public string LoginResult {get;set;}
public string LoginStatusInfo {get;set;}
[JsonProperty(".issued")]
public string Issued { get; set; }
[JsonProperty(".expires")]
public string Expires { get; set; }
}
Create model class as ApiResponse.cs
, to define the API response properties like below,
[Serializable]
[DataContract]
public class ApiResponse
{
/// <summary>
/// Returns the status of the API.
/// </summary>
[DataMember]
public bool ApiStatus
{
get;
set;
}
/// <summary>
/// Returns data from the API.
/// </summary>
[DataMember]
public object Data
{
get;
set;
}
/// <summary>
/// Returns status of the API request.
/// </summary>
[DataMember]
public bool Status
{
get;
set;
}
/// <summary>
/// Returns the status message from the API.
/// </summary>
[DataMember]
public string StatusMessage
{
get;
set;
}
/// <summary>
/// Returns the message from the API.
/// </summary>
[DataMember]
public string Message
{
get;
set;
}
}
The following scripts are mandatorily required to render the dashboard. Set Layout = null
in the top and replace the following code in your \Views\Home\Index.cshtml
page of <head>
tag.
js
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"></script>
<script type="text/javascript" src="~/Scripts/Index.js"></script>
In <body>
section initialize a method as Init()
which can be implemented in Index.js
file. Inside <body>
section include<div id="panel">
to display list of dashboard and <div id="viewer-section">
with a <div id="dashboard">
inside it. This container can be used to render dashboard.
<body onload="Init()">
<div id="container">
<div class="header-section">
<div id="grid-title">All Dashboard</div>
</div>
<div id="panel"></div>
</div>
<div id="viewer-section">
<div id="dashboard"></div>
</div>
</body>
In Controllers\HomeController.cs
define a GetDashboard()
method to get list of dashboards from serve. It uses a method GetToken()
which helps to get the token from server. Add a default view as Index.cshtml
public ActionResult Index()
{
return View();
}
[HttpGet]
[Route("GetDashboard")]
public string GetDashboards()
{
var token = GetToken();
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(EmbedProperties.RootUrl);
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Add("Authorization", token.TokenType + " " + token.AccessToken);
var result = client.GetAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/v2.0/items?ItemType=2").Result;
string resultContent = result.Content.ReadAsStringAsync().Result;
return resultContent;
}
}
public Token GetToken()
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(EmbedProperties.RootUrl);
client.DefaultRequestHeaders.Accept.Clear();
var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("grant_type", "password"),
new KeyValuePair<string, string>("UserId", EmbedProperties.UserEmail),
new KeyValuePair<string, string>("Password", EmbedProperties.UserPassword)
});
var result = client.PostAsync(EmbedProperties.RootUrl + "/api/" + EmbedProperties.SiteIdentifier + "/get-user-key", content).Result;
string resultContent = result.Content.ReadAsStringAsync().Result;
var response = JsonConvert.DeserializeObject<TokenObject>(resultContent);//Token token = new Token();
var tokenObj = JsonConvert.DeserializeObject<Token>(response.Token);
return tokenObj;
}
}
To get a particular dashboard details, define an API GetDetails()
which uses a method GetSignatureUrl()
to generate the algorithm. In this API, embedQuerString
,userEmail
and value from GetSignatureUrl()
method is appended as query parameters in the URL to get details of particular dashboard.
[HttpPost]
[Route("GetDetails")]
public ActionResult GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
embedQuerString += "&embed_user_email=" + EmbedProperties.UserEmail;
var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);
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 Json(resultContent);
}
}
public string GetSignatureUrl(string message)
{
var encoding = new System.Text.UTF8Encoding();
var keyBytes = encoding.GetBytes(EmbedProperties.EmbedSecret);
var messageBytes = encoding.GetBytes(message);
using (var hmacsha1 = new HMACSHA256(keyBytes))
{
var hashMessage = hmacsha1.ComputeHash(messageBytes);
return Convert.ToBase64String(hashMessage);
}
}
Create a Index.js
file under Script
folder. Define Init()
function which uses Ajax
call. Once Ajax
call is succeeded ListDashboards()
method will be invoked to list dashboards and render the dashboard.
```js
function Init() {
var http = new XMLHttpRequest();
http.open("GET", "/GetDashboards", true);
http.responseType = 'json';
http.setRequestHeader("Content-type", "application/json");
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
ListDashboards.call(this, typeof http.response == "object" ? http.response : JSON.parse(http.response));
}
else if (http.readyState == 4 && http.status == 404) {
console.log("Server not found");
}
else if (http.readyState == 4) {
console.log(http.statusText);
}
};
http.send();
};
```
In ListDashboards()
method we extract the dashboard list details from the response and append the list in respective container.renderDashboard()
method that helps to render dashboard.
function ListDashboards(data) {
if (typeof (data) != "undefined" && data != null) {
renderDashboard("'" + data[0].element.Id + "'");
data.forEach(function (element) {
var divTag = document.createElement("div");
divTag.innerHTML = element.Name;
divTag.className = "dashboard-item";
divTag.setAttribute("onclick", "renderDashboard('" + element.Id + "')");
divTag.setAttribute("name", element.Name);
divTag.setAttribute("itemid", element.Id);
divTag.setAttribute("version", element.Version);
divTag.setAttribute("ispublic", element.IsPublic);
document.getElementById("panel").appendChild(divTag);
});
}
}
In renderDashboard()
method we create a instance dashboard
and call a method loadDashboard()
to render dashboard.
function renderDashboard(dashboardId) {
var dashboard = BoldBI.create({
serverUrl: "http://localhost:5000/bi/site/site1",//Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
dashboardId: dashboardId,//Provide the dashboard id of the dashboard you want to embed here.
embedContainerId: "dashboard",//DOM id where the dashboard will be rendered, here it is dashboard.
embedType: BoldBI.EmbedType.Component,
environment: "enterprise",
width: "100%",
height: "100%",
mode: BoldBI.Mode.View,//Rendering mode of dashboard it can be Design and View for dashboard.
expirationTime: 100000,//Set the duration for the token to be alive.
authorizationServer: {
url: "/GetDetails"//URL from which particular dashboard details is obtained from server.
}
});
dashboard.loadDashboard();
};