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

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