Unified Interface Controls – The Number Input

Let’s look at another numerical control – The Number Input. The Number Input again creates another interactive layer to the form, allowing the user to easily increase and decrease a numerical field by clicking on a + or – button. Our use case is to be able to easily track the number of toys belonging to a cat/contact 😻. Meet Lewis:

As we can see, Lewis currently owns 17 toys. We’re going to implement the Number Input control on this field to very easily add or subtract toys to this total.

Using the Number Input – The Facts:

• Must be used with a number field: Whole, floating point, currency, decimal
• Min/Max value is taken directly from the field’s defined values
• Allows the user to increment in “Steps” – specific values for each new level on the slider

If you aren’t yet familiar with adding custom controls to a form, I recommend reviewing my previous blog post that outlines this process. Here’s a look at the setup for the Number Input control:

As we can see from above, the Number Input is a triple S – a Super Simple Setup! So far, the Number Input control has been the easiest to implement, with the main noticeable distinction being that it does not take custom Min/Max parameters like the previous two number controls we have looked at. It does, of course, have the Step parameter which again allows us to designate how much we increase or decrease a value based on a click of the +/- symbols.

One thing to consider when implementing a custom control is if it will assist the user and if it is beneficial on the particular client you are working on. In the case of the Number Input control, I can see how this would be a useful control on the mobile client in the Field Service module, for example. It is often much faster for a user to press a button on mobile than it is for them to type in a number.