Jump to content
  • Convert filter controls as custom dropdowns


    Introduction

    Spotfire Filters are very powerful when using them in text areas. 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

     

     


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...