Subscribe via Feed

Multiple Value Editboxes with Ajax Typeahead and What's Your Favourite Pub?

Paul Hannan, Aug 23, 2010 1:07:54 PM

I'm not endorsing mixing beer and work with this post, not unless you work in a brewery (that and working in a chocolate factory would be my ideal jobs ;-). What I'd like to do is point you to a nice little XPages App posted last week by Paul Calhoun where he invites you to state what are your favourite 'Pubs of the World'. It's all purely for science - Paul is looking for sample data - so a good cause.

Go there and select the 'Add a Pub' button. This brings you into a new document to record a favourite Pub. And in here there is a nice XPages feature demonstrated - see the 'Available Beers' editbox. This is a multiple value editbox with Ajax typeahead.

You enter an available beer as suggested by the typeahead, add a comma as a separator, and then add another beer, and so on. Multiple values in an editbox. Simple stuff and it works well. It saves you from having to add a monster listbox in your UI where you would have to do what seems like endless scrolling just to find the items you wish to enter. And though Paul doesn't have this in his example, you can use the editbox to enter new values which are not on the list.

Here's what the above example might look like in XPages source...

            multipleSeparator="," multipleTrim="true">


All this should work fine and we've fixed a couple of issues in the multipleSeparator area in 852 namely the bug with multiple date and numeric values (EGLN7YMLYD) for example, though there are a few gotchas here to be aware of when using multi value editboxes.

Using convertors and validators can cause problems with multiple value editboxes.
When you set the editbox to display as a Number you are adding a number convertor to that field. This is fine but you may run into problems if the thousandth separator on the number is the same as the multipleSeparator - entering 2 values, for example '123' and '54321', could become 3 values, '123', '54', and '321', when the updates are made to the document. To workaround this, we set 'groupingUsed' to false - this stops the inclusion of the thousandth separator.

Another issue you might hit is if you have a validator on the editbox (who doesn't have validators on validators on editboxes) and you're entering the items using the typeahead only. Here you may see that the validation gets fired even though you have values already on the editbox (PHAN88ME87), that is if you've set the editbox as a require field for example. Here the workaround is to manually remove the trailing separator that was included by the typeahead. This is something we're looking to address in 853. You won't come across this problem if you enter a new value at the end of the list of items.

Given these drawbacks, multiple value editboxes are still a very useful feature. One that will becomes even handier when you bolt on Ajax typeahead, especially when you want to write up what is your favourite pub.


Hope this helps.



1 responses to Multiple Value Editboxes with Ajax Typeahead and What's Your Favourite Pub?

Paul T. Calhoun, August 23, 2010 2:11 PM

Thanks for the shout out and thanks for the tip !!!