Enhance Your Sisense Dashboard with a Search Box for Filters

[harikm007]

Enhance Your Sisense Dashboard with a Search Box for Filters

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 below website. Feel free to check it out for more details: 

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