Editor-AlphaNumericKeyPad

Description

Displays a customizable alphanumeric keypad for enterning number and character values.

Discussion

The [Editor-AlphaNumericKeyPad], as shown in the two images below, display the AlphaNumeric keypad editor in its two possible configurations. In the first image, the keypad is shown as it would be displayed on a phone.

In the second image, the keypad is shown as it would be displayed on a tablet.

This control must be placed inside an EditorSet container.
AlphaNumeric keypad as shown on a mobile device with a small screen, such as a phone.
AlphaNumeric keypad as shown on a mobile device with a larger screen, such as a tablet.

 Adding the Editor to a UX Component

To add the editor to a UX Component, select [Editor-AlphaNumericKeyPad] from the list of controls in the Defined Controls section.

 Configuring the Editor

The keypad is configured using the Editor configuration genie property in the FormView Builder.

The genie can be used to configure the editor, allowing you to define the keys shown, add custom keys, and configure how the keypad is displayed.

 Editor Settings

Maximum number of characters

The maximum number of characters the user can enter. Set to -1 for no limit.

Align

Defines the alignment of value in the display area. Can be left, center, or right.

Scale

If the value is longer than can fit in the display area, the text can be automatically scaled so that the full value can be seen. If unchecked, the text can be scrolled.

Initial keypad

Defines the initial set of keys shown. The keys shown can be Numeric or Alpha keys. Options are a (Alpha) or 1 (Numeric).

Initial Alpha keypad case is lowercase

If checked, the initial character case for the keypad is set to lower case. Otherwise, initial case is set to upper case. This option is only available if Allow lower case is checked.

Allow lower case

Defines whether or not upper and lower case values can be entered. If unchecked, only uppercase values are allowed.

Allow space

If checked, spaces can be entered using the AlphaNumeric keypad.

Show insertion point

If checked, an insertion point will be displayed in the text area to indicate where characters will be entered.

Initial cursor position

The initial position of the insertion point. Set to -1 to place the insertion point at the end of the value.

Keypad size

Defines the size of the keypad shown. Can be one of the following values:

auto

Automatically choose the keypad layout that best fits the available space.

full

Displays a full keypad with one key per character. Ideal for large devices such as tablets.

compact

Displays a compact keypad with multiple letters per key. Ideal for small devices such as phones.

Has custom keys

If checked, up to two additional custom keys can be added to the keypad.

Show primary custom key

If checked, the primary custom key will be shown in the keypad. This option is only available if Has custom keys is checked.

Primary custom key label

The label shown for the Primary custom key. This option is only available if Show primary custom key is checked.

Primary custom key value(s)

Enter one or more values in a comma delimited list. If you enter more than one value, a pop-up menu showing all custom values will be shown when the key is tapped. This option is only available if Show primary custom key is checked.

Show secondary custom key

If checked, the secondary custom key will be shown in the keypad. This option is only available if Has custom keys is checked.

Secondary custom key label

The label shown for the Secondary custom key. This option is only available if Show secondary custom key is checked.

Secondary custom key value(s)

Enter one or more values in a comma delimited list. If you enter more than one value, a pop-up menu showing all custom values will be shown when the key is tapped. This option is only available if Show secondary custom key is checked.

See Also