Filter Property Control

Create Searchable dropdowns / autocomplete with the help of Filters to act as Input Controls 

The map is not driven by the filter, but an expression that contains a document property. The filter drives the Property Control

This recipe allows you to leaverage the power of filters to drive property controls to enhance the user experience of Spotfire. 

Ingredients

• New filtering scheme
• A filter from the new filtering scheme
• A calculated Value
• 1 Dropdown or Input property control
• 1 Input field property control
• html and javaScript

html

<div id="myInput" >
  <span class="ddown">
    ◄spotfire 'selection' input property control goes here►
    <span class='srchBtn'>⋯</span> 
  </span>
  <span class="sfFltr"> ◄spotfire filter(s) goes here► 
    <span class='closeBtn'>✕</span> 
  </span>
  <div class="sfCalcVal">◄spotfire calculated value from new filtering scheme goes heere►</div>
  <div class="sfInput">◄spotfire 'selection' input fileld control goes here► </div>
</div>

javaScript

//script parameters
target = "myInput"

//node elements
container = document.getElementById(target);
dropdown = document.querySelector(".ddown");
filter = document.querySelector(".sfFltr");
searchButton= document.querySelector(".srchBtn");
closeButton = document.querySelector(".closeBtn");
selection = document.querySelector(".sfCalcVal");
sfInput = document.querySelector(".sfInput input");

//events
closeButton.addEventListener("click",()=>{
  filter.hidden=true;
  dropdown.hidden=false;
})

searchButton.addEventListener("click",()=>{
    dropdown.hidden = true;
    filter.hidden = false;
})

//monitor selection when its value changes
observer = new MutationObserver(()=>{
  filter.hidden=true;
  dropdown.hidden=false;
  sfInput.value = selection.innerText;
  sfInput.focus();
  sfInput.blur();
})

observer.observe(selection, {childList: true,subtree: true});

//apply styling and attributes 
filter.hidden = true;
selection.hidden = true;
css = `<style>
.closeBtn, .srchBtn{
  vertical-align:top;
  cursor:pointer; 
}

.sfFltr {position:fixed;z-index:1;}
.sfInput{position:fixed;z-Index:-1;}

</style>`

container.insertAdjacentHTML('afterend',css)

Preparation

1. Open the Sales and Marketing analysis from the library/samples folder
• Delete all but Sales performance and just keep the map
• Limit the SalesAndMarketing map layer with expression:
  upper([Store Name]) ~= Upper("${selection}")
  
  
2. Create a new filtering scheme called "filtersForPropertyControls" or something like that
• you can do that by right clicking the filter panel and show the filtering scheme menu
  
  
3. Change the [Store Name] filter type to use for the input property control as List Box Filter
   
   
4. Make sure the "filtersForPropertyControls" filtering scheme IS NOT selected in the filters panel
   
   
5. Add a Text area, edit in html and copy the html below 
   
   
6. Create an input or dropdown property control linked to a new document property called "selection" from a Text area.  Place the control as the first child of the <span class="ddown"> element
• if using a dropdown, make sure to select unique values from [Store Name] column
  
  
7. Add the filters from the "filtersForPropertyControls" filtering scheme inside the <span class="sfFltr"> element
   
   
8. Create a calculated value inside the <div class="sfCalcVal"> to get the first element from the filter and limit the data only from the "filtersForPropertyControls" filtering scheme
• First([Store Name])
• very important not to leave any spaces. For example:
  <div class="sfCalcVal"><SpotfireControl id="2d1..26cc" /></div>
  
  
9. Insert an Input field property control inside the <div class="sfInput"> element and link it to the "selection" document property
   
   
10. Save the text area and Insert the JavaScript below