Hide filters based on selected filter

[GSSC]

Creating a new post as I cannot comment on this post - https://community.sisense.com/t5/build-analytics/hide-widgets-based-on-selected-filters/m-p/5375

I am using the widget script that the above post from @harikm007 to hide widgets based on selected filter. I would like to add a script that hides dashboard filters based on selected filter. So for the example below when Widget A is selected then the Widget B Filter should be hidden and when Widget B is selected then the Widget A Filter should be hidden.

[DRay]

Hi @GSSC,

Thank you for reaching out. I'll tag @harikm007 and see if they can offer a suggestion.

[harikm007 · Accepted solution]

Hi @GSSC ,

Try below dashboard script to hide a filter based on another filter selection. Make sure to update the variables based on your requirement.

//Title of filter based on which other filters need to hide/show. In your case its 'Widget'
const filterTitle = 'Widget';

//Mapping between filter item and title of filter to be be Hidden
const itemFilterMapping = {
	'Widget A': 'Widget A Filter',
	'Widget B': 'Widget B Filter'
}


const filterOptions = {
						save: true,
						refresh: true,
					}

dashboard.on('filterschanged', (dash, args) => {
		
	const filterObj = args.items.find(el => el.jaql.title === filterTitle);
	
	if(!filterObj)
		return
		
	selectedItem = filterObj.jaql.filter.members[0];

	dash.filters.$$items.forEach((item, index) => {
		
		var display = 'block'

		if (itemFilterMapping[selectedItem].includes(item.jaql.title)) {
			display = 'none'
			
			if(!item.jaql.filter.all) {
				item.jaql.filter = {
					all: true
				}
				prism.activeDashboard.filters.update(item, filterOptions);
			}
		}
		
		var styles = `

					.global-filters .ew-content-host .ew-panel .ew-item-wrapper:nth-child(${index+2}) { 

						display: ${display};

					}`
		var styleSheet = document.createElement("style")
		styleSheet.innerText = styles
		document.head.appendChild(styleSheet)

	})

})

dashboard.on('initialized', (dash, args) => {
		
	const filterObj = dash.filters.$$items.find(el => el.jaql.title === filterTitle);
	
	if(!filterObj)
		return
		
	selectedItem = filterObj.jaql.filter.members[0];

	dash.filters.$$items.forEach((item, index) => {
		
		var display = 'block'

		if (itemFilterMapping[selectedItem].includes(item.jaql.title)) {
			display = 'none'
			
			if(!item.jaql.filter.all) {
				item.jaql.filter = {
					all: true
				}
				prism.activeDashboard.filters.update(item, filterOptions);
			}
		}
		
		var styles = `

					.global-filters .ew-content-host .ew-panel .ew-item-wrapper:nth-child(${index+2}) { 

						display: ${display};

					}`
		var styleSheet = document.createElement("style")
		styleSheet.innerText = styles
		document.head.appendChild(styleSheet)

	})

})

Result:

Related Posts: 

Hide dashboard filters

Hide widgets based on selected filters

-Hari

https://www.binextlevel.com/ 

[GSSC]

This is great, thank you!