How to perform URL linking by passing the filter in a linked dashboard using JavaScript Embedding?

This article guides how to implement URL linking with a passing filter to the linked dashboard when using JavaScript embedding. It covers the necessary JavaScript events and API members required to pass filter values to the linked dashboard.

Steps to Configure URL Linking

1. Create a URL-Linked Dashboard:

   • Set up a URL-linked dashboard in the Bold BI server. Refer to the Bold BI documentation to know more about it.

2. Embed the Dashboard:

   • Once the dashboard is configured, embed it into your application.

3. Modify the Script File:

   • In the embedded application, please refer to the jQuery file in the tag.

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

   • Open the script file where the BoldBI.create() method is defined. Add the beforeNavigateUrlLinking event and invoke the clientBeforeNavigateUrlLinking method. You can refer to the KB article for performing URL linking in embedding applications without passing a filter to the linked dashboard.

   function renderDashboard(dashboardId) {
       var dashboard = BoldBI.create({
           // Other configurations...
           beforeNavigateUrlLinking: "clientBeforeNavigateUrlLinking"
       });
       dashboard.loadDashboard();
   }
   

4. Implement the clientBeforeNavigateUrlLinking Method:

   • This method will handle the URL linking and filter parameters. Below is an example implementation:

   function clientBeforeNavigateUrlLinking(arg) {        
       $('body').find('#ulrLink_target').remove();//removing if the element already exist
       arg.cancel = true; //canceling the usual url linking workflow to build the linking process in completedly embedded application
       //Creating container for dashboard rendering in popup
       var targetContainer = $('<div id="ulrLink_target" class="bi-dashboard"></div>');
       var dlgDiv = $('<div id="sample_dialog"></div>');
       targetContainer.append(dlgDiv);
       //Extracting header for linked dashboard
       var urlWithoutParams = arg.linkInfo.url.split('?')[0];
       var popUpHeaderName = decodeURIComponent(urlWithoutParams.substring(urlWithoutParams.lastIndexOf('/') + 1));
       $('body').append(targetContainer);
       var dialogHeaderName = popUpHeaderName;
       //Extracting filter value for linked dashboard
       var filterValue = "";
       if (typeof (arg.linkInfo.parameterDetails) != "undefined") {
           var parameterValue = "";
           for (var i = 0; i < arg.linkInfo.parameterDetails.length; i++) {
               parameterValue += arg.linkInfo.parameterDetails[i].parameter + ": " +
                   arg.linkInfo.parameterDetails[i].value + ";\n"
               filterValue += arg.linkInfo.parameterDetails[i].parameter + " = " +
                   arg.linkInfo.parameterDetails[i].value;
           }
           $("#url-linking-area").val(parameterValue);
       }
       //Creating linked dashboard header with filter value
       var dialogHeaderNameWithFiltervalue = dialogHeaderName + " - FilterValue: " + filterValue;
       // Creating pop-up
       var dialog = new window.ejdashboard.popups.Dialog({
           header: dialogHeaderNameWithFiltervalue,
           width: window.innerWidth - 70 + 'px',
           showCloseIcon: true,
           isModal: true,
           target: document.getElementById('ulrLink_target'),
           height: '800px',
           content: '<div id="urlLinkDbrd"></div>'
       });
       // Extracting dashboard Id for linked dashboard
       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));
       dialog.appendTo('#sample_dialog');
       $('#ulrLink_target .e-dlg-content');
       $('.e-dlg-overlay').css('height', $('.layout-fixed').height() + 'px');
       //Rendering linked dashboard with usual JS embedding technique in popup
       var urlLinkDbrd = BoldBI.create({
           serverUrl: rootUrl + "/" + siteIdentifier,
           dashboardId: dbrdId, 
           embedContainerId: "urlLinkDbrd",
           embedType: BoldBI.EmbedType.Component,
           environment: environment, 
           width: window.innerWidth - 100 + "px",
           height: '600px',
           expirationTime: 100000,
           authorizationServer: {
               url: authorizationServerUrl
           },
           dashboardSettings: {
               showHeader: false
           },
           filterParameters: filterValue
       });
       urlLinkDbrd.loadDashboard();
   }
   

The highlighted widget is configured with a URL linking option. When a specific country is clicked within this widget, the corresponding filter is applied, and the linked dashboard is rendered in a popup with the selected filter.

In this demonstration, clicking on the country ‘UK’ applies the filter, and the dashboard is successfully filtered to display data specific to ‘UK’.

Conclusion

By following the steps outlined above, you can successfully implement URL linking in a JavaScript embedded dashboard. This allows for dynamic filtering and enhanced user interaction with the dashboard.

Additional References

• Bold BI Documentation for URL linking in Bold BI server
• Documentation for URL linking JavaScript event ‘beforenavigateurllinking’