Convert filter controls as custom dropdowns

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)

License:  TIBCO BSD-Style License