Keypad

axKeypad

Description

This is a text element which attaches a default jQuery keypad with a decimal character.

Usability

Context	Supported
Input screen fields	Yes
Output screen fields	No
Input subfile fields	No
Output subfile fields	No
New screen elements	Yes

Properties

Name	Description and Comments	JavaScript	Shipped default
value	Initial element value to be displayed.	Yes. Must return a string.	None
style	Additional style properties that should be applied to the element.	Yes. Must return a valid style object.	None
maxInputLength	If specified, this will set the maximum number of characters that can be entered.	Yes. Must return a number.	0
onFocus	Optional. JavaScript code to be executed when the element receives the focus.	Yes.	None
onBlur	Optional. JavaScript code to be executed when the element lost the focus.	Yes.	None
enabled	Indicates whether this element is enabled. TS2 only.	Yes. Must return a Boolean.	True
layout	The keypad layout to be applied. Comma separated strings can be inputted or an array of string in the script editor. TS2 only.	Yes. Must return an array of strings.	None
prompt	The text that will displayed on top of the keypad. TS2 only.	Yes. Must return a string.	None
allowKeyboardInput	Indicate whether entry by keyboard is enabled. TS2 only.	Yes. Must return a Boolean.	False
randomise	Indicate whether to randomise the keys' positions on every show of the keypad. TS2 only.	Yes. Must return a Boolean.	False
label	The text that will be displayed as label above the input element. For Material Design theme only.	Yes. Must return a String.	Blank
labelStyle	CSS properties to be applied to label. For Material Design theme only.	Yes. Must return a valid style object.	Blank
textFieldStyle	Specify the appearance of the Keypad extension as a Text Field component. The values are Standard and Outlined. For Material Design theme only.	No	Standard

Notes, Comments and Warnings

When language is set to non-French, the following keypad eXtension with decimal point character will be displayed:

And if set to French, the following keypad eXtension with the comma character as the decimal point will be displayed:

In application, appStylesTheme property = JQueryUI

When JQueryUI is selected in Application->Styling->appStylesTheme property, the display will change according to the theme that was set in the Application’s jqueryTheme property. Unlike the Basic extension which only uses the smoothness theme, when JQUeryUI is selected in appStylesTheme property, the theme of this extension will also change by applying the JQuery theme that is set in the jqueryTheme property.

The display when redmond theme is set:

The display when ui-lightness theme is set:

layout Property

The layout of the keypad can be changed using this property. Setting the “.0,789,456,123” string into the layout property

will result in the extension being display this way:

Set the following script

"['789' + $.keypad.CLOSE, '456' + $.keypad.CLEAR, '123' + $.keypad.BACK, '.0']"

will result in the keypad being display this way:

Setting the value “$.keypad.qwertyLayout” in the script mode will result in the following display:

$.keypad.qwertyLayout is a jQuery constant that indicates to the keypad to use the standard QWERTY layout when displaying the keypad. Other constants that can be use are the following:

$.keypad.numericLayout: Standard numeric layout

$.keypad.qwertyAlphabetic: Standard US keyboard alphabetic layout

$.keypad.qwertyLayout: Standard US keyboard layout

For special key markers, the following can be used:

$.keypad.CLOSEt: Close button

$.keypad.CLEAR: Clear button

$.keypad.BACK: Back button

$.keypad.SHIFT: Shift button

$.keypad.SPACE_BAR: Space bar button

$.keypad.ENTER: Enter button

$.keypad.SPACE: Empty space

$.keypad.HALF_SPACE: Empty half space

In application, appStylesTheme property = Material Design

When Material Design is selected in Application->Styling->appStylesTheme property, the display will change according to the theme that was set in the Application’s mdTheme property.

In Material Design theme, the keypad extension is displayed as a Text Field component.

When the label property is set, the extension will be displayed as follows:

And when the extension is clicked:

Keypad

See Also