Blog Post

Use Case Gallery
1 MIN READ

Enhance Your Sisense Dashboard with a Search Box for Filters

harikm007's avatar
harikm007
Data Warehouse
09-20-2024

Learn how to improve user experience in your Sisense dashboards by adding a dynamic search box to your filters. This step-by-step guide shows how to streamline filtering and make dashboards more intuitive and efficient.

Navigating through a long list of filters in the right-side panel of your Sisense dashboard can be a challenge for users. To streamline this process and improve user experience, consider adding a search box that allows users to quickly find the filters they need without endless scrolling.

I’ve created a script that you can easily integrate into your dashboard to implement this search feature. This will not only make it more user-friendly but also enhance the overall functionality of your dashboard.

dashboard.on('initialized', function (se, ev) { $('.filters-headline').css({'height':'50%', }); $('.filters-global-header').css('height', '65px'); let searchBox = $('#custom-filter-search'); if(searchBox) { searchBox.remove() } let $input = $('<input type="text" id="custom-filter-search">'); let $button = $('<button id="custom-filter-search-button"> Search </button>'); $('.filters-global-header').append($input); $('.filters-global-header').append($button); $button.css({ 'margin-left': '5px', 'padding': '1px 3px', 'border-radius': '3px', 'border': '1.5px solid #bfbfbf', 'background-color': '#ffffff', 'font-size': '13px', 'color': 'black' }) $button.on('click', function(){ const inputValue = $('#custom-filter-search').val().toUpperCase(); $('.global-filters .ew-content-host .ew-panel .ew-item-wrapper').each(function(index, element){ if ($(this).find('.f-header-host .ew-i-caption').text().toUpperCase().includes(inputValue)) { $(this).css('display', 'block') } else { $(this).css('display', 'none') } }) }); })

For a more refined and visually appealing search box, I’ve shared scripts and tips on the website below. Feel free to check it out for more details: 

https://www.binextlevel.com/post/adding-a-search-feature-for-filters

Updated 06-06-2025
Version 5.0
widget script

3 Comments

    • harikm007's avatar
      harikm007
      Data Warehouse
      07-02-2025

      Hi MikeGre​ ,

      It seems like the 'initialized' event is not working.

      Please try the below query. The main change I made is replacing 'initialized' with 'widgetrefreshed'

      dashboard.on('widgetrefreshed', function (se, ev) { 
	$('.filters-headline').css({'height':'50%', }); 
	$('.filters-global-header').css('height', '65px'); 
	
	let searchBox = $('#custom-filter-search'); 
	if(searchBox.length > 0) { 
		return;
	} 
	
	let $input = $('<input type="text" id="custom-filter-search">'); 
	let $button = $('<button id="custom-filter-search-button"> Search </button>'); 
	
	
	$('.filters-global-header').append($input); 
	$('.filters-global-header').append($button); 
	$button.css({ 'margin-left': '5px', 'padding': '1px 3px', 'border-radius': '3px', 'border': '1.5px solid #bfbfbf', 'background-color': '#ffffff', 'font-size': '13px', 'color': 'black' }) 
	
	$button.on('click', function(){ 
		const inputValue = $('#custom-filter-search').val().toUpperCase(); 
		$('.global-filters .ew-content-host .ew-panel .ew-item-wrapper').each(function(index, element){ 
			if ($(this).find('.f-header-host .ew-i-caption').text().toUpperCase().includes(inputValue)) { 
				$(this).css('display', 'block') 
			} else { 
				$(this).css('display', 'none') 
			} 
		}) 
	}); 
})

      -Hari

Related Content