Wednesday, January 13, 2016

Better numeric input on mobile

Orbeon Forms has a Number field which allows you to enter integer or decimal numbers, but until now this field didn't particularly help users enter numbers efficiently on a smartphone or tablet without a physical keyboard.

But we thought we could do better, since iOS has the ability to show a numeric keypad when only the digits 0 to 9 are allowed, and, alternatively, to show the "numbers and punctuation" keyboard pane if digits are expected but other characters are needed as well (such as a decimal point). This is available even to mobile web apps, so the Number fields now does some magic and toggles these keyboards as needed!

When we know that the number field only accepts non-negative integer numbers, we show the numeric keypad:

In other cases, we show the "numbers and punctuation" keyboard pane:

There is a little trick: how do we know whether the number is restricted to integers, or cannot be negative? Until now we couldn't express these constraints nicely, but we have now added new common constraints called "Positive or Zero" and "Maximum Fractional Digits":

These common constraints not only help toggle the proper keyboard, but also, of course, validate the data appropriately.

It turns out that the implementation was not as simple as you might think, but we figured it out so you don't have to and now you can have much more efficient numeric input on mobile devices!

This enhancement will be available in Orbeon Forms 4.11.

No comments:

Post a Comment