A collapsible or hidden filter box that with one click can display custom filters.
Text Area HTML
Paste the following template into your text area editor in HTML mode
<script> function FilterExpand(iconId,resetId,panelId) { var im = document.getElementById(iconId); var el = document.getElementById(panelId); var fr = document.getElementById(resetId); if (el.style.display === 'none') { el.style.display = 'block'; fr.style.display = 'block'; $('#HiddenInput input').val(window.performance.now()).blur(); if ( im.getBoundingClientRect().left >= parseInt(document.body.scrollWidth/2) ) { el.style.right = (document.body.scrollWidth - im.getBoundingClientRect().left + 5) + 'px'; fr.style.left = (el.getBoundingClientRect().right) + 'px'; } else { el.style.left = (im.getBoundingClientRect().left + parseInt(im.clientWidth) + 10 ) + 'px'; fr.style.right = (document.body.scrollWidth - el.getBoundingClientRect().left) + 'px'; } if ( im.getBoundingClientRect().top >= parseInt(document.body.scrollWidth/2) ) { fr.style.top = (im.getBoundingClientRect().top - parseInt(im.clientWidth) + 5 ) + 'px'; el.style.bottom = '50px'; } else { fr.style.top = (im.getBoundingClientRect().bottom + 5) + 'px'; el.style.top = '85px'; } el.style.maxHeight = (document.body.scrollHeight - parseInt(el.style.top) - 45) + 'px'; } else { el.style.display = 'none'; fr.style.display = 'none'; } } </script> <div class='filter-icon'></div> <div class="filter-reset"> Please add a filter reset action control button here </div> <div class="filter"> <div id="HiddenInput" style="display: none;"> Please add a Spotfire input field here and connect it to a string type document property. This is to fix the dropdown styling issue that occurs when the filter panel is opened. Don't worry this area will be hidden from your users. </div> Please place your filters Spotfire Controls here </div>
Javascript Code
Add this to the text area javascript library, by clicking on the javascipt button on the editor
If adding this code for the first time, click "New"
window.onload = $('.filter-reset').each(function(i, li) { li.id = "filter-reset-" + i.toString(); li.style.display = "none"; li.style.width = "auto"; li.style.maxWidth = "110px"; li.style.background = "white"; li.style.color = "black"; li.style.border = "2px solid grey"; li.style.borderRadius = "6px"; li.style.padding = "3px"; li.style.textAlign = "center"; li.style.position = "fixed"; li.style.zIndex = "11"; }); window.onload = $('.filter').each(function(i, li) { li.id = "filter-" + i.toString(); li.style.display = "none"; li.style.width = "315px"; li.style.background = "white"; li.style.color = "black"; li.style.position = "fixed"; li.style.zIndex = "10"; li.style.border = "2px solid grey"; li.style.padding = "5px"; li.style.borderRadius = "6px"; li.style.margin = "5px 0px 5px 0px"; li.style.overflowY = "auto"; }); window.onload = $('.filter-icon').each(function(i, li) { li.innerHTML = "<div class='ui-icon ui-icon-search' id='filter-icon-" + i.toString() + "' style='transform: scale(2); margin: 5px auto 5px auto;'></div>"; li.setAttribute("onclick","FilterExpand('filter-icon-" + i.toString() + "','filter-reset-" + i.toString() + "','filter-" + i.toString() + "');"); li.style.cursor = "pointer"; });
Related Information
Spotfire IronPython - Reset filters and marking
Spotfire J - Accordion (Collapsible Filter Grouping)