How to change dashboard filters on Tabber Widget tab switch [Linux]
Summary: Thalita Santos, also known as Thalita Santos, provides a guide on how to programmatically change Sisense dashboard filters when a user switches tabs in a Tabber Widget. The article includes a step-by-step explanation on setting up the environment and applying the necessary code, which allows each tab to be mapped to a specific brand filter. When users click on a tab, the dashboard automatically updates the filter to show relevant data. This dynamic approach improves usability by ensuring that the displayed data corresponds to the selected tab. Additionally, the author advises testing the solution in your environment prior to deployment, as it may not work across all scenarios or Sisense versions.
Introduction
This article demonstrates how to programmatically change dashboard filters in Sisense dashboards when a user switches tabs in a Tabber Widget. The solution is tested on Sisense L2026.1 and works for both cloud and on-premises deployments. By following this guide, you can create dashboards that automatically filter data based on the selected tab, improving usability and data relevance.
Step-by-Step Guide
Prepare Your Environment
Create a new dashboard or go to an existing dashboard, and create a Tabber Widget (or use existing one).
Apply the code
Edit the Tabber Widget, go to three dots menu and Edit Script, and paste the following code:
// Map each tab to the Brand value you want to filter by
var tabFilterMapping = {
'TAB 1': 'ABC',
'TAB 2': 'Addimar '
};
var lastAppliedTab = null; // Track the last tab for which the filter was applied
function setBrandFilter(value, tabName) {
var filter = prism.activeDashboard.filters.$$items.find(function(f){
return f.jaql && f.jaql.title === 'Brand';
});
if (filter) {
// Only apply if not already applied for this tab
if (lastAppliedTab !== tabName) {
filter.jaql.filter = {
explicit: true,
multiSelection: false,
members: [value]
};
lastAppliedTab = tabName;
prism.activeDashboard.filters.update(filter, {save: true, refresh: true});
}
}
}
widget.on('ready', function(scope, args) {
// On initial load, apply filter for the default tab
var defaultTab = scope.style.tabs[scope.style.activeTab].title;
var defaultValue = tabFilterMapping[defaultTab];
if (defaultValue) {
setBrandFilter(defaultValue, defaultTab);
}
// On tab click, apply filter only if a new tab is selected
$('.listItemContainer', element).on('click', function(e){
var selectedTab = $(e.currentTarget).text().trim();
var filterValue = tabFilterMapping[selectedTab];
if (filterValue) {
setBrandFilter(filterValue, selectedTab);
}
});
});
Code Explanation
In this example we are mapping the tabs (TAB 1 and TAB 2) with the brand names we want to be applied in the filter, and then, when the tabs elements are clicked, we apply the filter change logic to filter the specific brand name mapped for TAB 1 or TAB 2 in the dashboard.
Conclusion
By leveraging the Tabber Widget’s scripting capabilities, you can create dynamic dashboards that respond to user interactions, such as tab changes, by automatically updating filters. This approach enhances user experience and ensures that relevant data is always displayed based on the selected tab. The provided script is a flexible starting point - feel free to expand it to support additional filters as needed for your use case, or even trigger other actions or manipulate something other than filters if required.
References/Related Content
Disclaimer:This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
