How to show a detailed view of a widget in JavaScript embedding application
You can able to show detailed view of a widget in JavaScript based embedding application using URL Linking support in Bold BI application.
Follow the below steps to achieve this
-
First, you need to create and publish a main dashboard with required widgets in Bold BI server.
-
Then, create a detailed information dashboard with the required widgets and publish this dashboard. After this, copy this dashboard’s ID and use that dashboard ID in
URLtext box ofLinkProperty of the corresponding widget in a main dashboard. Then choose theTargetasPop up.
-
After this, embed the main dashboard in your application using Dashboard ID by following the steps mentioned in this section.
-
Next, you need to add
beforeNavigateUrlinking(/embedding-options/embedding-sdk/embedding-api-reference/events/#beforenavigateurllinking) event to handle and show the detailed information of a widget in a pop-up window and this event will be triggered before the URL linking navigation is invoked.
Find the sample code to show a details view of a widget in pop-up window as follows
var dashboard = BoldBI.create({
beforeNavigateUrlLinking: function (arg){
$('body').find('#ulrLink_target').remove();
arg.cancel = true;
var targetContainer = $('<div id="ulrLink_target"></div>');
var dlgDiv = $('<div id="sample_dialog"></div>');
targetContainer.append(dlgDiv);
$('body').append(targetContainer);
var dialogHeaderName = arg.linkInfo.url === '7efc0299-90c1-46c5-b20b-3b1023d30387' ? 'Post Growth Analysis' : arg.linkInfo.url === 'dc6ea49d-a74b-448c-b272-e370b1376ab4' ? 'User Growth Analysis' : arg.linkInfo.url === '433636b5-df4a-4ba9-a854-e824b46ac434' ? 'Post Per User Analysis' : arg.model.dashboardName; // This code will set Title for the details information window based on the linked dashboard ID
var dialog = new window.ejs.popups.Dialog({
header: dialogHeaderName,
width: window.innerWidth - 70 + 'px',
showCloseIcon: true,
isModal: true,
target: document.getElementById('ulrLink_target'),
height: '750px',
content: '<div id="urlLinkDbrd"></div>'
});
dialog.appendTo('#sample_dialog');
$('#ulrLink_target .e-dlg-content');
var urlLinkDbrd = BoldBI.create({
serverUrl: serverUrl,
dashboardId: arg.linkInfo.url,
embedContainerId: "urlLinkDbrd",
embedType: BoldBI.EmbedType.Component,
environment: BoldBI.Environment.Cloud,
width: window.innerWidth - 100 + "px",
height: '650px',
expirationTime: 100000,
authorizationServer: {
url: authorizeUrl
},
dashboardSettings: {
showHeader: false
}
});
urlLinkDbrd.loadDashboard();-
After completing this, when you click on the corresponding widget, you can view the detailed information of a widget in pop-up window with the assigned Title like below screen shot
