cancel
Showing results for 
Search instead for 
Did you mean: 

Hide widgets based on selected filters

harikm007
13 - Data Warehouse
13 - Data Warehouse

There can be situations where we need to hide few widgets if particular item is selected in a filter. Here is a script to hide widgets based on dashboard filter.

Reference: https://www.binextlevel.com/post/hide-widgets-based-on-selected-filters

harikm007_0-1672766002398.png

Steps:

 
  1. Create dashboard

  2. Add below script to dashboard

  3. Update the variable 'filterName' with name of dashboard filter based on which the widgets need to be hidden.

  4. Update the variable 'itemWidgetMapping' with mapping of filter item and widgets to be hidden. Widgets specified in 'default' key will be hidden if selected filter item is not defined in this variable. So don't delete the key 'default'.

  5. Save the script and refresh the dashboard

 
dashboard.on('filterschanged', function (se, ev) {
	
	let filterName = 'Region'
	
	
	//mapping of filter items and widgets to be hidden.
	//if selected filter item is not available in the list, widgets in 'default' key will be hidden
	let itemWidgetMapping = {
		'Midwest':['6390b5a285a029002e9e2ad6'],
		'South': ['6238887ba77683002ea4425b'],
		'West':['6390b5a285a029002e9e2ad6', '6238887ba77683002ea4425b'],
		'default':[]
	}

	selectedFilter = ev.items.find(el=>el.jaql.title == filterName)
	
	let selectedItem = 'default'
	
	if(selectedFilter && selectedFilter.jaql.filter.members)
		selectedItem = selectedFilter.jaql.filter.members[0]
	
	//unhide all widgets first and then hide widgets based on selected filter
	$(`widget`).closest('.dashboard-layout-subcell-host').removeClass('dontshowme-parent')
	
	if(selectedItem in itemWidgetMapping){
		
		for (const [key, value] of Object.entries(itemWidgetMapping)) {
			
			if(key == selectedItem){
				itemWidgetMapping[key].forEach(function (item, index) {
					$(`widget[widgetid="${item}"]`).closest('.dashboard-layout-subcell-host').addClass('dontshowme-parent')
				});
			}
		}

	}
	else{
		
		itemWidgetMapping['default'].forEach(function (item, index) {
			$(`widget[widgetid="${item}"]`).closest('.dashboard-layout-subcell-host').addClass('dontshowme-parent')
		});

	}

});

-Hari

 

 

 

3 REPLIES 3

benmi
8 - Cloud Apps
8 - Cloud Apps

Hi, thanks for providing the script. Unfortunately this doesn't seem to be working for me. Does the 'dontshowme-parent' class need to be defined somewhere?

benmi
8 - Cloud Apps
8 - Cloud Apps

I was able to make it work by using jQuery's .hide() and .show() function instead.

paulDiag
7 - Data Storage
7 - Data Storage

Hello,
Thank you for this feature, that is so cool.
Is it possible to also conditionally hide the widget when exporting to PDF ?
That would be amazing ! 
Thank you