A GitHub link has been provided to get the sample application, which demonstrates the dashboard rendering with the list of dashboards available in your Bold BI server and followed by steps to create new embedding application in the ASP.NET Web Forms
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 Web Forms sample from GitHub.
You need to set your embed property details in the EmbedProperties.cs
and Site.Master
as follows.
UserEmail | UserEmail of the Admin in your 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 |
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) |
DashboardId | Set the item id of the dashboard to embed from BI server. |
Run your ASP.NET Web Forms sample.
The dashboard can be rendered in design mode or created with the following changes in the Init()
method.
<script type="text/javascript">
var dashboardId = "db8d3eb2-a608-4ffd-9aad-cd51278e1531";
function Init() {
this.dashboard = BoldBI.create({
serverUrl: "http://localhost:12345/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: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
mode: BoldBI.Mode.Design
width: "100%",
height: "100%",
expirationTime: 100000,
authorizationServer: {
url: "Default.aspx/GetEmbedDetails"
}
});
this.dashboard.loadDesigner();
}
</script>
serverUrl | Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1) |
dashboardId | Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard. |
embedContainerId | Container Id in which dashboard renders.It should not contain hypen. |
mode | In which mode you want to render dashboard. It can either be 'View' or 'Design' mode. |
expirationTime | Set the duration for the token to be alive. |
authorizationServer | Url of the 'GetEmbedDetails' action in the application. |
Based on the provided embed details with the dashboard, authorize the server URL by calling the GetEmbedDetails
function, (Default.aspx/GetEmbedDetails)
call, and the provided EmbedProperties
values.
Learn more about authorize server here
In the above authorization, the SignatureUrl
is generated with the provided EmbedSecret key
and validated embed details in Bold BI. Once details are validated, the dashboard starts to render.
In the Site.Master
, change the dashboard Id of the respective dashboard as you wish to embed.
Start Visual Studio and click Create a new project
.
Choose ASP.NET Web Application (.NET Framework), then click Next.
Change the project name as you want, then click Create
.
Choose Web Forms and Web API, then click OK
.
Under the model folder, create the EmbedProperties.cs
class to define the mandatory properties as follows.
public class EmbedProperties
{
//Enter your BoldBI credentials here.
public static string UserEmail = "";
// Get the embedSecret key from Bold BI, please refer this link(https://help.syncfusion.com/bold-bi/on-premise/site-settings/embed-settings)
public static string EmbedSecret = "";
}
Open the Default.aspx.cs
implement an API GetEmbedDetails()
, which invokes the GetSignatureUrl()
method as follows.
[WebMethod()]
public static void GetEmbedDetails(string embedQuerString, string dashboardServerApiUrl)
{
embedQuerString += "&embed_user_email=" + EmbedProperties.UserEmail;
//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;
embedQuerString += "&embed_server_timestamp=" + timeStamp;
var embedDetailsUrl = "/embed/authorize?" + embedQuerString + "&embed_signature=" + GetSignatureUrl(embedQuerString);
using (var client = new System.Net.Http.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;
var js = new System.Web.Script.Serialization.JavaScriptSerializer();
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.ContentType = "application/json; charset=utf-8";
HttpContext.Current.Response.Write(js.Serialize(resultContent));
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.End();
}
}
public static 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);
}
}
In this API, the embedQuerString
,userEmail
and the value from the GetSignatureUrl()
method are appended as query parameters in the URL to get details of a particular dashboard from the server.
In the Site.Master
, refer to the following file, which is mandatory to render the dashboard.
<script src="https://cdn.boldbi.com/embedded-sdk/v6.8.9/boldbi-embed.js"></script>
In the <body>
section, initialize the method as Init()
and remove the existing header container. In the <script>
tag, implement its functionality as follows.
<script type="text/javascript">
var dashboardId = "db8d3eb2-a608-4ffd-9aad-cd51278e1531";
function Init() {
this.dashboard = BoldBI.create({
serverUrl: "http://localhost:12345/bi/site/site1", //Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://demo.boldbi.com/bi/site/site1)
dashboardId: dashboardId, //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: BoldBI.Environment.Enterprise, // If Cloud, you should use BoldBI.Environment.Cloud
mode: BoldBI.Mode.View,
width: "100%",
height: "100%",
expirationTime: 100000, //Set the duration for the token to be alive.
authorizationServer: {
url: "Default.aspx/GetEmbedDetails" //URL from which particular dashboard details is obtained from server.
}
});
this.dashboard.loadDashboard();
}
</script>