Embedding Dashboards with Views in JavaScript embedding
Embedding dashboards with views in view mode allows users to retrieve their views every time they access the embedded dashboard. This feature can be implemented by passing the “view” value as a query string in the “filterParameters” JavaScript API.
Steps to Embed the Dashboard with View
-
Initialize the REST API to the back-end of the application to obtain the query string of the respective “view”.
Here is a JavaScript function that triggers the REST API:
function View(){
var http = new XMLHttpRequest();
http.open("GET", getQueryStringUrl, true); //API request to back-end application
http.responseType = 'json';
http.setRequestHeader("Content-type", "application/json");
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
embedDashboard.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();
}
-
Implement the REST API in the back-end of your application.
This API passes the view Id to retrieve the “QueryString”. Here is a C# example:
[HttpGet]
[Route("GetQueryString")]
public string GetQueryString()
{
var token = GetToken();
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(GlobalAppSettings.EmbedDetails.ServerUrl);
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Add("Authorization", token.TokenType + " " + token.AccessToken);
var result = client.GetAsync(GlobalAppSettings.EmbedDetails.ServerUrl + "/api/" + GlobalAppSettings.EmbedDetails.SiteIdentifier + "/v5.0/dashboards/views/aee07bf6-5ff9-4f54-9151-a2183a7fae5c").Result;
string resultContent = result.Content.ReadAsStringAsync().Result;
return resultContent;
}
}
-
Obtain the view Id of the particular view from the URL of the respective dashboard in its view.
-
Pass the “QueryString” from the API response through the “filterParameters” JavaScript API.
Here is a JavaScript function that embeds the dashboard:
function embedDashboard(views) {
this.dashboard = BoldBI.create({
serverUrl: rootUrl + "/" + siteIdentifier,
dashboardId: "1d8ec617-4e50-4f93-9abf-52c743c276df",
embedContainerId: "dashboard",
mode: BoldBI.Mode.View,
embedType: embedType,
environment: environment,
width: "100%",
height: "100%",
expirationTime: 10000,
filterParameters: views.QueryString,
authorizationServer: {
url: authorizationServerUrl
},
dashboardSettings: {
filterOverviewSettings: {
viewName: views.ViewName
}
}
});
this.dashboard.loadDashboard();
}
By following these steps, you can successfully embed the dashboard with a view.
References
