JavaScript Checkbox for Spotfire

Introduction

Here is another way to create checkbox. The approach is similar to the IronPython Checkbox and Radio Buttons Property Control for Spotfire where we use a Calculated Value Spotfire Control that shows the state of a Boolean Document Property which can be toggle with an IronPython script. Then we can run any other IronPython script when the Boolean Document Property changes. For example, we can turn on or off zoom selector, lines and curves or other aspects of a visualization.

Requirements

• Document Property
• Text Area
• Spotfire Calculated Value Dynamic Item
• IronPython
• JavaScript

Instructions

Step 1: Create a Boolean Document property "sw1"

Step 2: Create a Text Area and edit the html. Add a Calculated Value dynamic item and wrap it with an html tag with a unique identifier. For example 'myCheckbox'

Show zoom sliders: <span id='myCheckbox'>
   <SpotfireControl id="c1ae0202e631427ba9e84d47af237d15" />
</span> 

Step 3: Edit the Calculated Value and set the value to be calculated using this custom expression

 if(${sw1},"[on]","[off]")

Step 4: Configure an action for the Calculated value so when it clicks, it triggers an IronPython script by going to the Calculated value settings > Actions > ☑ Perform action on click > [settings...] > Script > [New...] > and call the script "toggleBooleanDocProp". 

 Document.Properties["sw1"] = not Document.Properties["sw1"]

Step 5:  Now you can trigger a script when the sw1 Document property changes. Go to File > Document properties > Properties > sw1 > Script > Execute the selected script of your choice. Here is an example of a script that toggles the zoom sliders for all Line charts

from Spotfire.Dxp.Application.Visuals import VisualTypeIdentifiers,LineChart
for visual in Document.ActivePageReference.Visuals:
	if visual.TypeId == VisualTypeIdentifiers.LineChart:
		vis = visual.As[LineChart]()
		vis.XAxis.ManualZoom = Document.Properties["sw1"]
		vis.YAxis.ManualZoom = Document.Properties["sw1"]

Step 6: To beautify the toggle button, add this JavaScript to the text area. Change the button size and colors from the script directly and modify the html template if needed

/*usage:
just wrap a calculated value with:
  <a id="myCheckbox">
     <spotfire calculated value goes here>
  </div>
  requirements for the calc val spotfire control:
  The calc val drives a boolean doc prop "sw1" that toggles its state when clicked
  To change the bool doc prop sw1 when clicked, assign the ironpython script:
     Document.Properties["sw1"] = not Document.Properties["sw1"]
  The calc val custom expression can be just the bool doc prop:
    ${sw1}
  or something more descriptive:
    "lines and curves are: " & if(${sw1},"[on]","[off]")
  Make sure the calcValOutput script param here matches the sw1 output
*/


//scrip parameters
id = "myCheckbox";
calcValOutput = "[on]";
buttonSize=1;

//get doc prop value that comes from calc value expression
cv = document.getElementById(id);

//add a placeholder for the custom expression html to render as a sibling of the id
cb = document.createElement('span');

//set default value according to doc prop. Wait a bit for the actionControl to render
setTimeout(()=>{
   isChecked = cv.innerText==calcValOutput
   //console.log(cv.innerText,calcValOutput,isChecked)

   html = `Show zoom sliders
   <label class="switch">
     <input type="checkbox" ${isChecked?"checked":""}>
     <span class="slider"></span>
   </label>` 

   cb.innerHTML = html; 
   cv.insertAdjacentElement("afterend",cb);

   //set the slider to click the calculated column
   cb.querySelector(".slider").onclick = ()=>{cv.querySelector(".actionCell").click()};  
   
   //hide the calc val
   cv.hidden = true
   
},2500);



//add style for look and feel. This can be placed on a different script
//buttonSize=1;

css=`<style>
/* The switch - the box around the slider */
.switch {
  --size:${buttonSize};
  position: relative;
  display: inline-block;
  width: calc(30px * var(--size));
  height: calc(17px * var(--size));
}


 
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: calc(13px * var(--size));
  width: calc(13px * var(--size));
  left: calc(2px * var(--size));
  bottom: calc(2px * var(--size));
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
 
input:checked + .slider {
  background-color: #2196F3;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(calc(13px * var(--size)));
  -ms-transform: translateX(calc(13px * var(--size)));
  transform: translateX(calc(13px * var(--size)));
}
 </style>
`
cv.insertAdjacentHTML("afterend",css);

Back to the JavaScript Component Hub for Spotfire