Checkbox List Property Control

 

On a text area, create a multiple select list box property control and call it "myStringList" and another string input field property control and call it "transfer". The transfer document property should trigger the following script when it changes:

#update multiSelect
Document.Properties["myStringList"] = Document.Properties["transfer"].split(",")
Edit the text area html and wrap the controls with a tag element with id "myCheckboxList"

html

<div id="myChecboxList">
   <SpotfireControl id="'myStringList' muiltiple selection list box" />
   <SpotfireControl id="'transfer' input control " />
</div>

JS 

id = "myChecboxList" 

//get items from multiSelect
ph = document.getElementById(id);
items = ph.innerText.split("\n").filter(x=>x!="..."&&x.trim());

//get checked values from csv
target = ph.querySelector("input");  
checked = target.value.split(",").filter(x=>x!=""); 

//create checkboxes
items.forEach((x,i)=>{
   val = items[i];
   cb = document.createElement("input");
   cb.type ="checkbox";
   cb.value = val;
   tn = document.createTextNode(" "+val);
   br = document.createElement("br");
   [br,cb,tn].forEach(e => {ph.appendChild(e)});
 

   //check if checked
   cb.checked = checked.includes(val)
   console.log(val,checked,val in checked) 

   //onclick 

  cb.onclick = () => {
    vals = [...document.querySelectorAll(`#${id} input[type='checkbox']`)]
    target.value = vals.filter(x => x.checked).map(x => x.checked ? x.value : null);
    target.focus();
    target.blur();
  };

   //hide input
   target.style.position="fixed"
   target.style.zIndex=-1"

   //hide multiselect
   ph.firstElementChild.style.display="none"  
})