Keypad

What is the Form Keypad?

The keypad form type generates a customizable keypad with different input behaviors.

Options

General

Rows

Specifies the number of rows to be generated. The possible value is in the range: 1 - 40. The default is 4.

Columns

Specifies the number of columns to be generated. The possible value is in the range 1 - 40. The default is 3.

Select Type

Defines how the keypad operates. Possible values:

• Input: Works like a keyboard; buttons do not stay pressed.
• Check: Works like checkboxes; buttons stay pressed until toggled off.
• Radio: Works like radio buttons; only one button can be pressed at a time it stays pressed.
• Simple: One button can be pressed, but it won’t stay pressed.

Max Entry

Defines the maximum number of entries allowed. Once reached, no new buttons can be pressed.

Values

Specifies the values for the buttons. Values are separated by new lines or semicolons (';').

Button Modifiers

The keypad supports various button modifiers, defined using square brackets. These do not appear on the button itself but modify its behavior:

• [!] - Disabled button
• [-] - Empty cell (no button generated)
• [*] - Pressed by default
• [c] - Clear button (clears all pressed buttons and output)
• [ce] - Clear entry button (clears all pressed buttons and output)
• [enter] - Sends out the current output as a sensor event
• [space] - Inserts a white space (only works in Input mode)
• [insert number here] - Defines button colspan
• [msg:some kind of message here] - Sends out a custom message when pressed
• [icon:icon text] - Displays a Material Font icon before the text
• [value:some value] - Specifies a custom button value
• [background:some color value] - Specifies a custom button background, allows HTML color values

Modifier Precedence Table

Order	Input	Check	Radio	Simple
1	Clear	Clear / Clear Entry	Clear / Clear Entry	Clear / Clear Entry
2	Clear Entry	Enter / Value	Enter / Value	Enter
3	Enter	-	-	Value
4	Space	-	-	-
5	Value	-	-	-

Styling Options

Button Rounding

Defines button corner radius. The possible value is in the range: 0 - 80. The default is 5.

Distance Between Buttons

Defines spacing between buttons. The possible value is in the range: 2 - 50. The default is 4.

Button Color

Sets the button background color.

Button Shadow Color

Sets the button shadow color.

Pressed Button Color

Sets the color of pressed buttons.

Pressed Button Font Color

Sets the font color of pressed buttons.

Background Image

Defines whether buttons should have a background image.

Sensor Events

Keypad generates sensor events upon interaction:

FORM-NAME

• Triggered when the keypad writes to the Mock DataSource.
• Value is the output object. For example:

{
"text": "1, 2, 3",
"pressed": [0, 1, 2]
}

FORM-NAME-text-value

• Value is the output objects text value.
• Triggered after every button press.

FORM-NAME-button-pressed

• Value is the pressed buttons value. Note that the value is not the same as the label.
• Triggered after every button press (without modifiers).

FORM-NAME-changed

• Value is the new output objects text value.
• Triggered when the output value changes.

FORM-NAME-message

• Value is the buttons message.
• Triggered when a button with a message modifier is pressed.

FORM-NAME-enter-pressed

• Value is the output objects text value.
• Triggered when a button with the [enter] modifier is pressed.

FORM-NAME-max-entry-reached

• Value is the max possible entries
• Triggered when the max entry limit is reached.

Setting Mock Field and Own Value

The keypad stores an object containing:

• text: The output text
• pressed: the array of the pressed buttons indexes

The text field contains the accumulated output text, and the pressed field contains the pressed buttons indexes.

• Keypad will try to write to the Mock field and own value
  • initially
  • after each button press.

Output examples

Input:

"ExampleKeypad": {
  "text": "output text", 
  "pressed": []
}

Check:

"ExampleKeypad": {
  "text": "a, b, c",
  "pressed": [0, 12, 10]
}

Radio:

"ExampleKeypad": {
  "text": "value",
  "pressed": [5]
}

Simple:

"ExampleKeypad": {
  "text": "another value",
  "pressed": []
}

Value from datasource

The keypad doesn't take values from datasource.