top of page

For any support or more customized script, contact us -  binextlevel@gmail.com

Hide widgets based on selected filters

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




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')
		});

	}

});




26 views0 comments

Recent Posts

See All
bottom of page