How to Pass Master Widget Filters to a Linked Dashboard in JavaScript Embedding

This article provides guidance on how to pass the selected master widget filters from a master dashboard to a linked dashboard in a JavaScript embedded application with the help of JavaScript Events.

Step 1: Configure the widget and enable the include master widget filters.

Configure the widget, enable linking, and turn on the Include Master Widget Filters option. Refer to the Bold BI documentation for more details on configuring linking

Step 2: Embed the Dashboard

Once the dashboard is configured in the Bold BI® server, embed it into your application and refer to the jQuery file inside the head tag.

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

Notes:
When a widget is clicked in the embedded application, users are prompted to log in to Bold BI when navigating to the linked dashboard; to avoid this, use the beforeNavigateUrlLinking event to handle navigation within the application and display the linked dashboard in a popup with the applied filters.

Step 3: Add the Event to the Embedding Code

Open the script file where the BoldBI.create() method is defined. Add the beforeNavigateUrlLinking event, which is triggered before URL linking navigation occurs, and set it to invoke the clientBeforeNavigateUrlLinking method.

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

   dashboard.loadDashboard();
} 

Implement the clientBeforeNavigateUrlLinking method to handle navigation and pass the master widget filters to the linked dashboard. This method captures the click event, extracts the filter details, and loads the linked dashboard in a popup using the embedding SDK.

function clientBeforeNavigateUrlLinking(arg) {    
   $('body').find('#urlLink_target').remove(); 
   arg.cancel = true; 
   var targetContainer = $('<div id="urlLink_target" class="bi-dashboard"></div>');
   targetContainer.append($('<div id="sample_dialog"></div>'));
   var decodedLinkUrl = decodeURI(arg.linkInfo.url || "");
   var urlSegments = decodedLinkUrl.split('?');
   var urlWithoutParams = urlSegments[0];
   var queryString = urlSegments.length > 1 ? urlSegments[1] : "";
   var dialogHeaderName = decodeURIComponent(urlWithoutParams.substring(urlWithoutParams.lastIndexOf('/') + 1));
   $('body').append(targetContainer);
   var filterSegments = [];
   var blockedKeys = ["applyurlfilteralone", "showmydashboards"]; // Bold BI control params, not actual filters
   function appendFilter(key, value) {
       filterSegments.push(key + "=" + value);
   }
   if (!filterSegments.length && queryString) {
       var params = new URLSearchParams(queryString.replace(/&&/g, '&'));
       params.forEach(function (value, key) {
           if (key && value && blockedKeys.indexOf(key.toLowerCase()) === -1) {
               appendFilter(key, value);
           }
       });
   }
   var filterValue = filterSegments.join('&');
   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('urlLink_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');
   $('#urlLink_target .e-dlg-content');
   $('.e-dlg-overlay').css('height', $('.layout-fixed').height() + 'px');
   //Rendering linked dashboard with usual JS embedding technique in popup
    getEmbedToken()
       .then(accessToken => {
           var urlLinkDbrd = BoldBI.create({
       serverUrl: rootUrl + "/" + siteIdentifier,
       dashboardId: dbrdId, 
       embedContainerId: "urlLinkDbrd",
       width: window.innerWidth - 100 + "px",
       height: '600px',
       expirationTime: 100000,
    embedToken: accessToken,
       dashboardSettings: {
           showHeader: false
       },
       filterParameters: filterValue
   });
   urlLinkDbrd.loadDashboard();
})
} 

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

The following images illustrate that the selected filter information is passed to the linked dashboard.

Conclusion

By following these steps, you can successfully pass filter information from the master dashboard to a linked dashboard in a JavaScript embedded environment.

Additional Reference:

Configuring widget linking

How to perform url linking in javascript embedded dashboard