JavaScript Checkbox List for Spotfire

Convert a List box (multiple select) into a Checkbox property control

Introduction

Spotfire Input Controls are powerful to control document properties through input controls such as Inputs, Listboxes and Sliders. There is currently no Checkbox document property control, but that does not means that it can't be done in Spotfire with some scripting.

A JavaScript creates the necessary checkboxes so when they are clicked, it updates an input field property control that triggers an iron python script that updates the String List document property that drives the multi select property control.

Setup

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"

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

Add the following JavaScript

checkboxList.js

id = "myCheckboxList" 

//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;
  cb.id = `${id}-${i}`;
  lb = document.createElement("label");
  lb.textContent = " " + val;
  lb.setAttribute("for", `${id}-${i}`);
  br = document.createElement("br");
  [br, cb, lb].forEach(e => { ph.appendChild(e) });

  //check if checked
  cb.checked = checked.includes(val);

  //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";
});

Note: Change the height so the Spotfire List box (multiple select) control shows all the elements, so the JavaScript code can read them. This can be done by using the Format button on the text area

Changing the look and feel

Add only of the following script to inject a style to the myCheckboxList placeholder and change how the checkboxes look

checkboxList-arrows.css

id = "myCheckboxList"

css = `
<style>
#{id} input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin-right: 5px;
}

#{id} input[type="checkbox"]:checked:before {
  content: "►";
  font-size: 14px;
  color: #fff;
  background-color: #0077cc;
  border-radius: 3px;
  padding: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#{id} span {
  display: inline-block;
  vertical-align: middle;
}
</style>
`
document.getElementById(id).insertAdjacentHTML("afterend",css)

checkboxList-solid.css

id = "myCheckboxList"

css = `
<style>


#{id} input[type=checkbox] {
  width: 14px;
  height: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f5f5f700;
  border-radius: 25%;
  border: 1.3px solid #123;
  display: inline-block;
  margin-top: 0;
  margin-bottom: -2px;
  transition: all 0.3s 0s ease;
}

#{id} input[type=checkbox]:checked {
  background-color: navy; 
  xtext-align: center;
  border: 1px solid #cc00003f;
}


</style>
`
document.getElementById(id).insertAdjacentHTML("afterend",css)

To make the checkbox scrollable, add this line before the style tag, or add this other script

checkbox-scrollable.css

id = "myCheckboxList" 
css = `<style>
#${id} {
    height: 200px;
    overflow: auto;
}
</style>` 
document.getElementById(id).insertAdjacentHTML("afterend",css)

Make your own css and share so I can add them here!

Using with other widgets

You can now place this control with other widgets, such as the JavaScript Icon Menu for Spotfire or the the JavaScript Popup for TIBCO Spotfire or any other widget

Combining with the popup widget

<div id="myPopup" class="JSPopup">
	<div>Open popup A</div>
	<div>This is popup A</div>
	<div>

<div id="myCheckboxList">
   <SpotfireControl id="'myStringList muilti select spotfire control" />
   <SpotfireControl id="regular input control 'transfer'" />
</div>


    </div>
</div>

Combining with the icon menu widget

<div class="iconMenu" style="font-size:20px;">
  <a>Action Control Link 1</a>
  <a onclick='document.querySelector("#myPopup:last-child").lastChild.click()'>this</a>
  <a>Action Control Link 3</a>
  <a>Menu</a>
</div>
<img class="icons fa-solid fa-1, fa-solid fa-check-square,fa-solid fa-3,fa-solid fa-bars" />

<div id="myPopup" class="JSPopup">
  <div></div>
  <div>This is popup A</div>
  <div>

    <div id="myCheckboxList">
         <SpotfireControl id="'myStringList muilti select spotfire control" /> 
         <SpotfireControl id="regular input control 'transfer'" />
    </div>

  </div>
</div>

Add a search box

This extension or plugin for the JavaScript Checkbox List for Spotfire allows to search items

Add a placeholder for the search box

<div id='mySearchbox'></div>

<div id="mySearchBox"></div>
<div id="myCheckboxList">
  <SpotfireControl id="myStringList multiselect" />
  <SpotfireControl id="transfer input field" />
</div>

Add checkboxList_searchBox.js script

//script parameters
searchBoxId = 'mySearchBox'
checkboxListId = 'myCheckboxList'

searchBoxPlaceHolder = document.getElementById(searchBoxId)
searchInput = document.createElement("input")
searchInput.type ="search"
searchBoxPlaceHolder.appendChild(searchInput)

searchInput.addEventListener('input', (x,i) => {
   [...document.querySelectorAll("#"+checkboxListId+" label[for^='"+checkboxListId+"-']")].forEach(x=>{
      matches = (x.innerText.toLowerCase().includes(searchInput.value.toLowerCase()));
      x.style.display=matches?'unset':'none';
      if (x.nextSibling) x.nextSibling.style.display=matches?'unset':'none';
      x.previousSibling.style.display=matches?'unset':'none';
    })
})

*some examples require html sanitization to be on

Check out the JavaScript Component Hub for Spotfire for more widgets

Back to the JavaScript Component Hub for Spotfire

Disclaimer

This method makes assumptions about the inner workings of Spotfire version 12.0.0 LTS Any analyses created using this hack may cause instability and performance issues and are likely to break when Spotfire is upgraded or hotfixed in the future. Any issues resulting from applying this hack are not covered by Spotfire maintenance agreements and Support will not assist in troubleshooting problems with analysis files where this approach is used.

Sign In

JavaScript Checkbox List for Spotfire

Introduction

Setup

Changing the look and feel

Using with other widgets

Combining with the popup widget

Combining with the icon menu widget

Add a search box

Disclaimer

Table of contents

User Feedback

Recommended Comments

Industries