dominoGuru.com

Your Development & Design Resource

Disabled INPUT Elements in Traditional vs. XPage IBM Lotus Notes Domino Generated Markup

07/16/2010 04:56 PM by Chris Toohey

The goal is simple: create a read-only field for data storage (and population) in Traditional and XPage IBM Lotus Notes Domino generated markup. This quick tip shows you how it can be done!

Ever need a read-only field on your forms? Something that you can write to via JavaScript, but not allow the user to actually modify.

Here's a simple example:

With a little CSS, we can get this to look really nice.

form#test2 input {

    border: 1px solid #666;

    padding: 4px 8px 4px 8px;

    font-size: 
8pt;

    cursor: pointer;

    background-color: #cdeb8b;

}

form#test2 input.disabled 
{

    border: none;

    padding: 0px;

    width: 300px;

    cursor: auto;

    background-color: transparent;

}

Which gives us the following:

In traditional IBM Lotus Notes Domino RAD techniques, you would simply modify the Field Properties of a given Field adding disabled to the Class and Other attributes.

IBM Lotus Notes Domino Field Properties - HTML Properties
for Disabled INPUT Elements

This change will generate the following markup:

<input name="example" value="" id="example" class="disabled" disabled>

IBM Lotus Notes Domino XPage development is actually more accommodating to the developer who wants to disable direct modification of the rendered INPUT Element.

In the XPage Edit Box Properties, you can simply click on the Disabled property.

IBM Lotus Notes Domino XPage Edit Box Properties -
Disabled INPUT Elements

Doing so updates the XPage XML as follows, adding Disabled="true".

<xp:inputText 
value="#{thisDoc.example}"

    id="example" disabled="true">

</xp:inputText>

The rendered HTML looks like this:

<input type="text" id="view:_id1:example1" name="view:_id1:example1" disabled="disabled" class="xspInputFieldEditBox">

Conclusion

Both Traditional and XPage-based IBM Lotus Notes Domino Application Development give you a pretty simple to use option for disabling the direct interface with a generated INPUT Element.

Where XPages really shines however, is that you can offer this User Interface Design option in Lotus Notes Client applications and -- as with most Control Attributes -- the Disabled state can be conditionally set based on SSJS... something that the Traditional RAD counterpart simply can not do.

The good news is that the next time you're looking to add a custom Date Picker, Timestamp, or DHTML-based Dialog-driven keyword value for an INPUT Element, you've got options!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.