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 from GitHub.
Please ensure you have enabled embed authentication on the embed settings
page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.
To download the embedConfig.json
file, please follow this link for reference. Additionally, you can refer to the following image for visual guidance.
Copy the downloaded embedConfig.json
file and paste it into the designated location within the application. Please ensure you have placed it in the application, as shown in the following image.
ServerUrl | Dashboard Server BI URL (ex: http://localhost:5000/bi, https://demo.boldbi.com/bi) |
SiteIdentifier | For Bold BI Enterprise edition, it should be like site/site1. For Bold BI Cloud, it should be an empty string. |
UserEmail | UserEmail of the Admin in your Bold BI, which would be used to get the dashboards list. |
EmbedSecret | Get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the Administration page |
Environment | Your Bold BI application environment. (If it is cloud analytics server, use `BoldBI.Environment.Cloud`; if it is your own server, use `BoldBI.Environment.Enterprise`) |
DashboardId | Item id of the dashboard to be embedded in your application. |
ExpirationTime | Token expiration time. (In the EmbedConfig.json file, the default token expiration time is 10000 seconds) |
Run your ASP.NET MVC
sample in Visual Studio.
NOTE: If you are facing an error related to
bin\roslyn\csc.ex
, it indicates that performing aclean build
andrebuild
is necessary.
The dashboard can be edited in the design mode, and create a new dashboard with the following changes in the renderDashboard()
method.
dashboardId | Provide the dashboard id of the dashboard you want to embed in view or edit mode. This property no need to create a new dashboard. |
mode | In which mode you want to render dashboard. It can either be 'BoldBI.Mode.View' or 'BoldBI.Mode.Design' mode. |
authorizationServer | Url of the 'authorizationServerAPI' action in the application. |
function renderDashboard(dashboardId) {
var dashboard = BoldBI.create({
serverUrl: rootUrl + "/" + siteIdentifier,
dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property
embedContainerId: "dashboard",
embedType: embedType,
environment: environment, // If Cloud, you should use BoldBI.Environment.Cloud
width: "100%",
height: "100%",
mode: BoldBI.Mode.Design,
expirationTime: 100000,
authorizationServer: {
url: authorizationServerUrl
}
});
dashboard.loadDesigner();
};
NOTE: We represent the dashboard embedding by default without the dashboard listing sidebar. You must navigate to the
dashboardlisting
URL (such as https://localhost:44382/home/dashboardlisting) to enable the dashboard list.
Based on the values in the embedConfig.json
, you’ll get the user token and validate it, then you can get the dashboard 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
.
When selecting the dashboard to render, authorize the server URL by calling the AuthorizationServer
action with the provided embedConfig.json
values.
In the above authorization, we have generated the 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
.
Start Visual Studio and click Create
new project.
Choose ASP.NET Web Application (.NET Framework), and then click Next.
Change the project name as you want, and then click Create.
Choose MVC and Web API, and then click OK.
Please ensure you have enabled embed authentication on the embed settings
page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it.
To download the embedConfig.json
file, please follow this link for reference. Additionally, you can refer to the following image for visual guidance.
Copy the downloaded embedConfig.json
file and paste it into the designated location within the application. Please ensure you have placed it in the application, as shown in the following image.
Create a model class called ApiResponse.cs
, to define the API response properties like below. Ensure the System.Runtime.Serialization
and System
namespaces are in the ApiResponse.cs
model file.
[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;
}
}
Create another model class as DataClass.cs
to define the following properties. These properties are used to get the dashboard details from the server. Ensure the System.Runtime.Serialization
namespace in the DataClass.cs
model file.
[DataContract]
public class EmbedClass
{
[DataMember]
public string embedQuerString { get; set; }
[DataMember]
public string dashboardServerApiUrl { get; set; }
}
public class EmbedDetails
{
public string Environment { get; set; }
public string SiteIdentifier { get; set; }
public string ServerUrl { get; set; }
public string EmbedSecret { get; set; }
public string UserEmail { get; set; }
public string EmbedType { get; set; }
public string DashboardId { get; set; }
}
Create another model class as GlobalAppSettings.cs
to define the following properties. These properties maintain the embedConfig.json
file object within the GlobalAppSettings
. Ensure the static BoldBI.Embed.Sample.Models.DataClass
namespace in the GlobalAppSettings.cs
model file.
public class GlobalAppSettings
{
public static EmbedDetails EmbedDetails { get; set; }
}
The following script is mandatory to render the dashboard. Set the Layout = null
at the top and replace the following code in your \Views\Home\Index.cshtml
page of the <head>
tag. Ensure the Models
folder is added in the namespaces.
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/v6.13.11/boldbi-embed.js"></script>
<link rel="stylesheet" href="~/Content/Site.css" />
<script type="text/javascript" src="~/Scripts/Embed/Index.js"></script>
<script type="text/javascript">
var rootUrl = "@GlobalAppSettings.EmbedDetails.ServerUrl";
var dashboardId = "@GlobalAppSettings.EmbedDetails.DashboardId";
var siteIdentifier = "@GlobalAppSettings.EmbedDetails.SiteIdentifier";
var environment = "@GlobalAppSettings.EmbedDetails.Environment";
var embedType = "@GlobalAppSettings.EmbedDetails.EmbedType";
var authorizationServerUrl = "@Url.Action("AuthorizationServer", "Home")";
</script>
In the <body>
section, include the <div id="viewer-section">
with a <div id="dashboard">
inside it. This container can be used to render the dashboard.
<body onload="renderDashboard(dashboardId)">
<div id="viewer-section">
<div id="dashboard"></div>
</div>
</body>
In the Controllers\HomeController.cs
to get particular dashboard details, define an API AuthorizationServer()
, which uses the GetSignatureUrl()
method to generate the algorithm. In this API, the embedQuerString
,userEmail
and the value from the GetSignatureUrl()
method are appended as the query parameters in the URL to get details of the particular dashboard. Include the Newtonsoft.Json
and System.Security.Cryptography
namespaces.
public ActionResult Index()
{
string basePath = AppDomain.CurrentDomain.BaseDirectory;
string jsonString = System.IO.File.ReadAllText(Path.Combine(basePath, "embedConfig.json"));
GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);
return View();
}
[System.Web.Http.HttpPost]
[System.Web.Http.Route("AuthorizationServer")]
public ActionResult AuthorizationServer(string embedQuerString, string dashboardServerApiUrl)
{
embedQuerString += "&embed_user_email=" + GlobalAppSettings.EmbedDetails.UserEmail;
var embedDetailsUrl = "/embed/authorize?" + embedQuerString.ToLower() + "&embed_signature=" + GetSignatureUrl(embedQuerString.ToLower());
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(GlobalAppSettings.EmbedDetails.EmbedSecret);
var messageBytes = encoding.GetBytes(message);
using (var hmacsha1 = new HMACSHA256(keyBytes))
{
var hashMessage = hmacsha1.ComputeHash(messageBytes);
return Convert.ToBase64String(hashMessage);
}
}
Open the Scripts
folder. Inside the Scripts
folder, create a new folder called Embed
. Inside the Embed
folder, create a new file called Index.js
. Define the renderDashboard()
method, an instance is created and called the loadDashboard()
method to render the dashboard. TherenderDashboard()
method helps to render the dashboard using the Embed SDK
file.
function renderDashboard(dashboardId) {
var dashboard = BoldBI.create({
serverUrl: rootUrl + "/" + siteIdentifier, //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: embedType,
environment: environment, // If Cloud, you should use BoldBI.Environment.Cloud
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: authorizationServerUrl //URL from which particular dashboard details is obtained from server.
}
});
dashboard.loadDashboard();
};
Open the Global.asax.cs
file and include the following code sample.
string basePath = AppDomain.CurrentDomain.BaseDirectory;
string jsonString = System.IO.File.ReadAllText(Path.Combine(basePath, "embedConfig.json"));
GlobalAppSettings.EmbedDetails = JsonConvert.DeserializeObject<EmbedDetails>(jsonString);
Run your ASP.NET MVC
sample in Visual Studio.