« Back to home

Disabled and read only

Posted on

XPages has a “read only” feature for fields. It also has a “disabled” feature for fields. In case that’s not confusing enough, it has a “show read only as disabled” feature too.

These three flags determine whether a field’s value is saved, whether it appears as text or as a form control, and whether the form control is read-only or disabled. Read-only fields can be selected normally with the mouse, but (at least in Bootstrap) are greyed out:

Read only

Disabled fields show a prohibition circle mouse cursor and can’t be selected:

Disabled

The problem I always have is remembering which combination of flags I need to get a particular behavior. Today I finally snapped and decided to put together a page which would try every combination, and then document the resulting behaviour.

SROAD readonly disabled in edit mode in read mode value saved
N N N editable field text Y
N N Y disabled field text Y
N Y N text text N
N Y Y text text N
Y N N editable field read-only field Y
Y N Y disabled field disabled field Y
Y Y N read-only field read-only field N
Y Y Y disabled field disabled field N

Where SROAD stands for the showReadonlyAsDisabled flag.

There’s another catch, though: as per the HTML standards, a disabled field doesn’t have its value submitted on form submit. So even if the back-end value is shown as saved in the table above, that doesn’t mean changes in the front-end value will make it to be saved. Clear?

From this, we see:

  • Setting readonly="true" also means “don’t save this value”.
  • Setting disabled="true" means “show a disabled field if you would normally show an editable field”.
  • Setting showReadOnlyAsDisabled means:
    1. You never get text, always a field.
    2. The field type depends on the readonly and disabled flags.

So, some typical requirements and the flag combos to get them:

Read-only field in both edit and read mode, value not saved

showReadonlyAsDisabled="true"
readonly="true"
disabled="false"

Read-only field in read mode, editable field in edit mode, value saved

showReadonlyAsDisabled="true"
readonly="false"
disabled="false"

Read-only field in both modes, value saved

You have to create an attribute on the field to set the readonly HTML attribute without telling XPages. For example:

<xp:inputText id="field1" value="#{document1.Field1}">
   <xp:this.attrs>
      <xp:attr name="readonly" value="readonly" />
   </xp:this.attrs>
</xp:inputText>

Disabled field in edit mode, text in read mode, value saved

This was the case I wanted – when in edit mode I want a disabled field with a value calculated via JavaScript. When in read mode, I want text, like any other field. Also, I want the value saved.

The answer: Just set disabled="true".