XPages: Handling disabled Checkboxes

XPages: Handling disabled Checkboxes

In a recent XPages workflow application i bumped into a nasty behaviour of the xp:checkBox control:
In a certain step of a workflow document, a checkbox is displayed as disabled, but still showing the checkbox state (checked or unchecked) which was set in a previous workflow step. When the user then submits the data, this value will be cleared(!).

Let’s check this out with an example:

The following page shows a simple page with a checkbox and a submit button.. an xp:text control shows the checked/unchecked value of the checkbox.

xpages_checkbox

And the according code:

<xp:checkBox text="I am a normal checkbox switch me on or off..."
 id="checkBox2" checkedValue="i am on" value="#{sessionScope.checkboxValue}"
 uncheckedValue="i am off" disabled="#{sessionScope.checkboxDisabled=='1'}"></xp:checkBox>
 <br />
 <br />
 <xp:button value="Submit" id="button1">
 <xp:eventHandler event="onclick" submit="true"
 refreshMode="complete" disableValidators="true">
 </xp:eventHandler>
 </xp:button>
 <br />
 <br />
 <xp:text escape="true" id="computedField2"
 value="And the value of the checkbox is: #{sessionScope.checkboxValue}"></xp:text>

So far so good. Now lets assume User A checked the checkbox and saved the data record. User B will open the document (edit-mode), but due to some business logic does only see this checkbox as disabled (and checked):

xpages_checkbox_disabled

 

If User B wants to submit his entered data and clicks “submit”, the value of the checkbox is also submitted, but resets the value!

xpages_checkbox 4

So what happened? Altough the checkbox was disabled, User B submitted the “unchecked” value of the checkbox to the server.

So how to avoid this? The magic property is readonly.. You have to set this to “true”, if you don’t want the user to change the value of this field anymore.. So either you compute the readonly property to true / false with the same logic of the disabled property, or you can also use a generic computation like this: readonly=”#{javascript:this.isDisabled()}”.

Check out the complete code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

 <div style="margin:50px;">
 <xp:checkBox text="Set the checkbox below to disabled or enabled.."
 style="font-style:italic" id="checkBox1" checkedValue="1"
 uncheckedValue="0" value="#{sessionScope.checkboxDisabled}">
 <xp:eventHandler event="onclick" submit="true"
 refreshMode="complete" disableValidators="true">
 </xp:eventHandler>
 </xp:checkBox>
 <br />
 <br />
 <xp:checkBox text="I am a normal checkbox switch me on or off..."
 readonly="#{javascript:this.isDisabled()}" id="checkBox2"
 checkedValue="i am on" value="#{sessionScope.checkboxValue}"
 uncheckedValue="i am off" disabled="#{sessionScope.checkboxDisabled=='1'}"></xp:checkBox>
 <br />
 <br />
 <xp:button value="Submit" id="button1">
 <xp:eventHandler event="onclick" submit="true"
 refreshMode="complete" disableValidators="true">
 </xp:eventHandler>
 </xp:button>
 <br />
 <br />
 <xp:text escape="true" id="computedField2"
 value="And the value of the checkbox is: #{sessionScope.checkboxValue}"></xp:text>
 </div>
</xp:view>

Leave a Reply

comment-avatar

*