Jump to content
  • JavaScript Checkbox for Spotfire

    Convert a Calculated Value into a sleek JavaScript Checkbox


    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.




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


    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" />

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


    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


    just wrap a calculated value with:
      <a id="myCheckbox">
         <spotfire calculated value goes here>
      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:
      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]";
    //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('div');
    //set default value according to doc prop. Wait a bit for the actionControl to render
       isChecked = cv.innerText==calcValOutput
       html = `Show zoom sliders
       <label class="switch">
         <input type="checkbox" ${isChecked?"checked":""}>
         <span class="slider"></span>
       cb.innerHTML = html; 
       //set the slider to click the calculated column
       cb.querySelector(".slider").onclick = ()=>{cv.querySelector(".actionCell").click()};  
       //hide the calc val
       cv.hidden = true
    //add style for look and feel. This can be placed on a different script
    /* The switch - the box around the slider */
    .switch {
      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)));


    Back to the JavaScript Component Hub for Spotfire

    User Feedback

    Recommended Comments

    There are no comments to display.

  • Create New...