How to perform URL linking in JavaScript Embedded Dashboard?

Published:

In Bold BI, we can link the dashboard with the widget of another dashboard such that when we click on the widget, the linked dashboard will be rendered. Refer to the documentation to know more about it. We provide the same support in JavaScript Embedding but with the help of JavaScript Events.

Steps to perform URL linking in JavaScript Embedded dashboard

Create a URL-linked dashboard in the Bold BI server by referring to this help documentation.
Once the dashboard is configured in the Bold BI server, embed the dashboard.
Now, In the embedded application, please refer to the jQuery file in the <head> tag.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then, open the script file, where there is the BoldBI.create() method, add the event beforeNavigateUrlLinking, and invoke the method clientBeforeNavigateUrlLinking.

function renderDashboard(dashboardId) {
   var dashboard = BoldBI.create({
       serverUrl:rootUrl+"/"+siteIdentifier,
       dashboardId: dashboardId,
       embedContainerId: "dashboard",
       authorizationServer: {
           url: authorizationServerUrl
       },
       beforeNavigateUrlLinking: "clientBeforeNavigateUrlLinking"
   });
   dashboard.loadDashboard();
};

In the clientBeforeNavigateUrlLinking method, a container (urlLink_target) is created to render the linked dashboard in a pop-up.

function clientBeforeNavigateUrlLinking(arg) {
       $('body').find('#ulrLink_target').remove();
       arg.cancel = true;
      var targetContainer = $('<div id="ulrLink_target" class="bi-dashboard"></div>');
       var dlgDiv = $('<div id="sample_dialog"></div>');
       targetContainer.append(dlgDiv);
       var urlWithoutParams = arg.linkInfo.url.split('?')[0];
       var popUpHeaderName = decodeURIComponent(urlWithoutParams.substring(urlWithoutParams.lastIndexOf('/') + 1)); // Extracting the name from arg for the linked dashboard
       $('body').append(targetContainer);
       var dialogHeaderName = popUpHeaderName;
       var dialog = new window.ejdashboard.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>'
       });
       const url = decodeURI(arg.linkInfo.url);
       const regx = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
       const urlComponents = url.split('/');  
       const dbrdId = urlComponents.reverse().find(component => regx.test(component));// Extracting the dashboard ID from arg for the linked dashboard
       dialog.appendTo('#sample_dialog');
       $('#ulrLink_target .e-dlg-content');
       $('.e-dlg-overlay').css('height', $('.layout-fixed').height() + 'px');
       var urlLinkDbrd = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           dashboardId: dbrdId, 
           embedContainerId: "urlLinkDbrd",
           width: window.innerWidth - 100 + "px",
           height: '600px',
           authorizationServer: {
               url: authorizationServerUrl
           },
           dashboardSettings: {
               showHeader: false
           }
       });
       urlLinkDbrd.loadDashboard();
}

The following images illustrate the dashboard feature of URL linking in embedding.

Related topics:

To know more about JavaScript embedding, linking dashboards in the Bold BI server, and the event beforeNavigateUrlLinking.

Was this article useful?

Dislike

Written by Soundarya Mani Meharan

Updated:

Comments (0)

How to perform URL linking in JavaScript Embedded Dashboard?

Access denied