Spotfire Filters are very powerful when using them in text areas. This article shows how, with a little tweaking with Javascript and CSS we can make these filter controls look amazing in our analysis.
Preparation
Copy the html code below and replace the SpotfireControls with a Calculated Value and a Filter by editing a text area in html mode
<div id="main" style="display:flex;"> <div class="nowrap"> <SPAN class="dropdown-el icon" > <LABEL><SpotfireControl id="CALC_VALUE" /></LABEL> </SPAN> <BR> <SPAN class=pop><SpotfireControl id="ANY SPOTFIRE CONTROL" /></SPAN> </div> : : : <div class="nowrap"> <SPAN class="dropdown-el icon" > <LABEL>custom label</LABEL> </SPAN> <BR> <SPAN class=pop>custom contents</SPAN> </div> </div>
Note: You will need html sanitization off. Ask your Spotfire admin to turn html sanitization off for you.
I use this Calculated Value Control expression to display a limited number of characters for the multiple selections.
left(UniqueConcatenate([Name]),28) & (if(len(UniqueConcatenate([Name]))>28,"...",""))
or this other expression to indicate the total number of items when the selection is too large
if(len(UniqueConcatenate([Name]))>28,UniqueCount([Name]) & " selected",UniqueConcatenate([Name]))
If you are using the dropdown value to display only one value, for example, when using a Radio Button Filter, the expression is much simpler:
UniqueConcatenate([Name]))
For Range Filters, I use:
Min([Date]) & " - " & Max([Date])
Add the following javascript code
//bind events var x=[...document.querySelectorAll(".dropdown-el.icon")] x.forEach(el=>{ el.addEventListener('click',(ev)=>{ let pop = el.parentNode.lastElementChild hideAll(pop) pop.style.visibility=pop.style.visibility=="hidden"?"visible":"hidden" }) }) //hides all except el function hideAll(el){ [...document.getElementsByClassName("pop")] .map((e,i)=>{ if(el!=e){ e.style.visibility="hidden" } }) } // Add event listener to the entire document document.addEventListener('click', (event) => { const clickedElement = event.target; // Check if the click was outside of all popups and dropdown elements if (!clickedElement.closest('.pop') && !clickedElement.closest('.dropdown-el')) { hideAll(); } }); hideAll() //add style var css=`<style> .dropdown-el { text-align: center; background: #ebf4fb; min-height: 95vh; margin: 0; padding: 0; border-bottom: 5vh solid #3694d7; font-family: "Myriad Pro", "Arial", sans; font-size: 12px; } .dropdown-el { max-width: 18em; position: relative; display: inline-block; margin-right: 1em; min-height: 2em; max-height: 2em; overflow: hidden; top: 0.5em; cursor: pointer; text-align: left; white-space: nowrap; color: #444; outline: none; border: 0.06em solid transparent; border-radius: 1em; background-color: #cde4f5; transition: 0.3s all ease-in-out; } .dropdown-el input:focus + label { background: #def; } .dropdown-el input { width: 1px; height: 1px; display: inline-block; position: absolute; opacity: 0.01; } .dropdown-el label { border-top: 0.06em solid #d9d9d9; display: block; height: 2em; line-height: 2em; padding-left: 1em; padding-right: 3em; cursor: pointer; position: relative; transition: 0.3s color ease-in-out; } .dropdown-el label:nth-child(2) { margin-top: 2em; border-top: 0.06em solid #d9d9d9; } .dropdown-el input:checked + label { display: block; border-top: none; position: absolute; top: 0; width: 100%; } .dropdown-el input:checked + label:nth-child(2) { margin-top: 0; position: relative; } .icon::after { content: ""; position: absolute; right: 0.8em; top: 0.9em; border: 0.3em solid #3694d7; border-color: #3694d7 transparent transparent transparent; transition: 0.4s all ease-in-out; } .pop{ border: 0.06em solid #3694d7; background: #fff; border-radius: 0.25em; padding: 0; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; min-height: 9em; overflow-y:auto; position:fixed; padding:2px; transition: 0.4s all ease-in-out; z-index:1; } </style>` document.getElementById("main").insertAdjacentHTML('beforeend', css)
Checkout more widgets on the JavaScript Component Hub for Spotfire
License: TIBCO BSD-Style License
Recommended Comments
There are no comments to display.