XPages Tip: Check whether your Checkbox is Checked with SSJS

If you’re not used to the fact that all component values are treated as strings by default, it can seem strange when you check the value of a checkbox component and expect a boolean return value.

I was recently working with a form that used a checkbox for one field. As I wrote SSJS code to check whether the checkbox was selected, I was reminded that comparing the value of that field is not done the way I would naturally expect. I would expect that code like this would work to execute logic based on the state of the checkbox:

if (getComponent('checkBox1').getValue()) {
  // checkbox selected - do something
} else {
  // checkbox not selected- do something else
}

This doesn’t work as expected. The condition in line 1 above will always evaluate to true.

In this next block of code, the condition will always evaluate to false and the ‘else’ block will always execute:

if (getComponent('checkBox1').getValue() == true) {
  // checkbox selected - do something
} else {
  // checkbox not selected- do something else
}

This is because component values are always treated as strings (on the front end, they’re not converted yet). Therefore, if you don’t explicitly define selected and unselected values for the checkbox, then it’s value will either be “true” or “false”. (Even if you compute the values for the checkbox and set them to boolean values, they’re still treated as strings when checking the component.)

So, if you want to check whether the checkbox is selected, you need to use code like this:

if (getComponent('checkBox1').getValue() == "true") {
  // checkbox selected - do something
} else {
  // checkbox not selected- do something else
}
Advertisements

18 responses to “XPages Tip: Check whether your Checkbox is Checked with SSJS”

  1. Naveen says :

    Rather than getValue() you can use isChecked() method which is available for check boxes which belong to the class com.ibm.xsp.component.xp.XspInputCheckbox. isChecked() returns a boolean value of true / false.

  2. Oliver Busse says :

    I will show this in my class this week! Thanks for sharing 🙂

  3. Tim Tripcony (@timtripcony) says :

    I’m curious: why not just ask the data source? Presumably the checkbox is bound to something (document, viewScope, etc.)… skip the component and ask what it’s bound to.

    For example, if the checkbox is bound to #{configDoc.settingEnabled}, configDoc.getValue(“settingEnabled”) will return “1” if that’s what the checkedValue property is set to for the checkbox component and the component is checked.

    Similarly, if the checkbox is bound to #{viewScope.someOption}, viewScope.get(“someOption”) will return the converted value of the checkbox.

    Asking the data instead of asking the component is always marginally faster for each operation, because getComponent() has to actually find the component (which can be expensive, especially on any page with a complex layout), whereas data sources and scope variables are very efficient for the EL resolver to access.

    • Brad Balassaitis says :

      I generally make it a point to do that — particularly after reading your posts on the subject. 🙂 But in my case where this issue arose, the checkbox actually was not bound to anything. It’s just a trigger for another workflow step, if selected.

    • Brad Balassaitis says :

      Great points about efficiency and post-conversion data retrieval, though. Thanks for posting!

  4. Dan Soares says :

    Brad, if I wanted to hide/display a text field based on whether a checkbox is checked, how would I do that without a round-trip to the server?

    Thanks,

    Dan

    • Brad Balassaitis says :

      You can use client-side JavaScript to do that. Get a handle to the checkbox and use the ‘checked’ property.

      I didn’t test this code, but something like this should do the trick (just substitue your checkbox field’s ID in place of ‘checkbox1’):

      if (dojo.byId(“#{id:checkbox1}”).checked) {
      // checked
      } else {
      // not checked
      }

  5. Yogesh Kashid says :

    Currently I am using Data table where my data is coming from Db2 in XPages.

    I having check box in my one column where its value is set to row id(Row Index).

    Is there any way for Getting the row ids for the checked checkboxes in dataTable by using CSJS?.

    I did this by using SSJS but I want this in CSJS.

    Please suggest …

    Thanks & regards,

    Yogesh

    • Brad Balassaitis says :

      When I look at the CSS of a checkbox generated in a view panel, I see that it has a value property set to the noteid of the document.

      The way you would approach it would vary a bit based on where you’re executing the code to check the value, but one example is to use a dojo query to get a handle to all of the checkboxes on the page, check whether each is selected, and retrieve the NoteID.

      This code will loop through all checkboxes on a view panel and display the NoteID of the selected checkboxes:

      dojo.query(‘input[type=checkbox]’).forEach(function(node) {
      if (node.checked) {
      alert(‘selected document: ‘ + node.value);
      }
      });

      • Yogesh Kashid says :

        Thanks Brad,

        I used below CSJS to get the Checkbox Values as I am using Computed field to display Check box. My Data is coming from DB2…

        var cbs = document.getElementsByTagName(‘input’);
        for(var i=0; i input’).at(rowID)[0].value;

        if( el==””)

        {
        alert(“Please enter comment.”)
        var el12 = dojo.query(‘div[id*=”inputText1″] .dijitInputField > input’).at(rowID)[0].focus();
        }

        }
        }
        }

        Demo XPages Code:

        <![CDATA[ var cbs = document.getElementsByTagName('input');
        for(var i=0; i input’).at(rowID)[0].value;

        if( el==””)

        {
        alert(“Please enter comment.”)
        var el12 = dojo.query(‘div[id*=”inputText1″] .dijitInputField > input’).at(rowID)[0].focus();
        }

        }
        }
        }]]>

        Enter Comment

        <![CDATA[#{javascript:var ind= new Number(getComponent("commentIndex").getValue());

        "”

        }]]>

  6. Yogesh Kashid says :

    My recent reply not showing properly I posted full code , its showing some of it…

    I used below CSJS to get the Checkbox Values as I am using Computed field to display Check box. My Data is coming from DB2…

    var cbs = document.getElementsByTagName(‘input’);
    for(var i=0; i input’).at(rowID)[0].value;

    if( el==””)

    {
    alert(“Please enter comment.”)
    var el12 = dojo.query(‘div[id*=”inputText1″] .dijitInputField > input’).at(rowID)[0].focus();
    }

    }
    }
    }

  7. Faiz Khan says :

    I need to get all checked values from Combobox group through SSJS. Kindly help with the code

    • Brad Balassaitis says :

      The best way to do that is to get the value from the data source. If the field is bound to an underlying document, use document.getItemValue(“fieldName”) or document.getValue(“fieldName”). This will give you an array of values to inspect.

  8. Simon says :

    what if you would like to check if atleast one bux in checked

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: