Read only edit box in XPage

In XPages, for edit box there is a property called “Read-only”. This property behaves a little different from the one in normal INPUT tag in HTML. I found this out recently and also posted it on the XPages Forum.

Here is a sample code:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    HTML Input Read Only Field:
    <input type="text" readOnly="true" value="12345" /><xp:br></xp:br>
    XPage Edit Box Read Only:
    <xp:inputText id="inputText1" readonly="true" defaultValue="12345">
    </xp:inputText>
</xp:view>

When you preview this XPage in a browser it looks something like this:

While the HTML Input is rendered properly and disallows any editing by user, the Edit box is rendered as a span text. I couldn’t find a straight solution to this. One workaround is to create an Output script on XPage and make the edit box read only via javascript. Here’s the code for output script:

<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[function makeFieldReadOnly() {
        document.getElementById("#{id:inputText1}").readOnly = true;
    }
    window.onload = makeFieldReadOnly;]]></xp:this.value>
</xp:scriptBlock>

Now the edit box is rendered as HTML Input Tag disallowing any user input.

Update 20 Jan 2012: This method would now be only applicable to 8.5.2 or previous releases as there is a new property in 8.5.3 - showReadonlyAsDisabled - which does this for you.