Monday, November 22, 2010

XPages - Adding non-xpages attributes to input fields

I got a question today from a reader of my blog, regarding input fields, and attributes not available in XPages. He was working with web applications for Apple devices, and needed to add some attributes to input fields that aren't allowed by Domino Designer/XPages.

My workaround kind of reminds me of "old school" domino development, where I often have fields that are HTML, and use hidden fields (hide from web) to capture the value from the browser.

Basically it works like this. The HTML for the input fields is hand typed in the source code. I have a hidden field (xp:inputHidden) for each of the custom fields. In the hidden fields, I've added a custom converter that fetches the value posted from the HTML field using the param map.

To simplify the process of adding custom fields, I've made a custom control with two parameters, fieldName and attributes. The field is bound to currentDocument[ compositeData.fieldName ], and the html field is rendered in a computed field (xp:text), where the attributes are added. I'm terrible at explaining code, so take a look at the provided demoapp to see what I mean :)

In the demoapp, I've created a simple form with HTML5 controls. You need Opera or Safari to view the controls properly.

Screenshots from Opera:



I don't recommend this technique unless you really need it. If possible, use JavaScript in the browser to set the attributes instead. This way, you can still take advantage of the power of XPages.

>> Download demoapp

4 comments:

Tim Tripcony said...

Tommy, as soon as I have time, I'll post some example code for extending inputText to support additional attributes. It's a good example of where the Extensibility API is useful.

Tommy Valand said...

Great!

JeFurry said...

I confirm that adding the following javascript statement to the onClientLoad event of the XPage does work on iOS 3 and 4 devices. The following will prevent iOS from automatically capitalising or spell-correcting the specified field ID, which is what was needed in this case:

document.getElementById("field_ID").setAttribute("autocapitalize", "off");
document.getElementById("field_ID").setAttribute("autocorrect", "off");


That said, the method detailed above allows for much more flexibility, where it's needed, so it's really useful to know. Thanks!

JeFurry said...

It probably goes without saying that the above javascript should be on the client side of the onClientLoad event.

Oops.