NumberSpinnerBox

Logical widget that represents a Numeric range field as an edit box with a button to adjust the value up or down, in a dynamic server page.

NumberSpinnerBox in Chrome
NumberSpinnerBox in Chrome

Widget Summary
Logical widget name: NumberSpinnerBox
Maps to physical widget: htmlinput of type number
Default definition: NumberSpinnerBox=htmlinput(html:type=number)
Supported triggers and properties: See htmlinput.
Use for: Numeric fields with a ValRep range

Description

For browsers that support input with type=number, the widget is displayed shown as a value box with spin button. For browsers that do not support this type or do not support incrementing and decrementing the value, the widget is displayed as a normal edit box (type=text). (This is the case for Internet Explorer 9, 10, and 11, and Edge.)

The NumberSpinnerBox Can be used to select a number within a specified range. You can specify a maximum and minimum value by setting the field's VapRep property. For example:

  • In the Properties Inspector, manually enter the range in the format Minimum:Maximum

    ValRep property showing minunum and maximum values for the range

  • In ProcScript:

    $valrep(NUMFLD)="-15:15"

Uniface automatically handles validation of the entered value. By default, the value is validated in the client so the user can correct an error before it is submitted. It is always validated on the server before it is stored.

It is also possible to set the maximum and minimum values by setting the DSP widget properties or the HTML attributes in the layout. In the Properties Inspector, enter properties in the format:

html:min=Value;html:max=Value. For example:

html:min=-10;html:max=10

Note: Uniface does not handle validation and synchronization in this case, so you as the developer are responsible for ensuring that the value falls within the specified range.

If both the ValRep and the DSP widget properties properties are specified, the Valrep values are used and Uniface handles validation and synchronization.

Related Topics