Input widget

The input widget displays a text input field.

Example

Properties

Property

Description

Data type

actionType

Supported action type is text or date. Default is text.

enum

ariaLabel

ARIA label, which provides additional information about the element's purpose and functionality to assistive technologies, such as screen readers. If this is not provided, assistive technologies use helpText instead.

string

context

JSONClosed A transfer path showing the agent group from to the agent to. containing the properties that define the visual appearance of the item, as described in Context properties.

string (JSON)

event

Name of event that fires when a user makes any input change.

string

helpText

Tooltip displayed below the input.

string

id

Unique identifier of this widget.

string

label

Optional label text displayed for Input control.

string

material

Implements a Material Design outlined text field, where the label is superimposed over the border, as described and shown in https://m3.material.io/components/text-fields/overview.

Boolean

placeholder

Text displayed as input placeholder.

string

setFocus

Indicates whether the engine sets focus to this widget. Default is false.

If set to true, the engine sets focus to the first input field when the rich-media widget is presented to the user. This is useful for accessibility and usability, when the user must populate the text input field.

Boolean
type Rich-media type, which is always Input. string

Validation properties for input

Property

Description

Data type

maxlength

Maximum length of input, in pixels.

integer

minlength

Minimum length of input, in pixels.

integer

pattern

Pattern that user input must match.

string (regular expression)

required

Indicates whether user input is required.

Boolean

Context properties

These are the context properties.

Property

Description

Data type

text

Label color, as a hex color code.

string (hex color code)

textAlign

Label alignment: left|center|right.

enum
textSize Label size, in pixels. integer

textStyle

Label style: normal|italic|bold.

enum

controlContext properties

These are the controlContext properties.

controlContext property

Description

Data type

borderColor

Input border color, as a hex color code.

string (hex color code)

borderRadius

Input border radius, in pixels.

integer

borderWidth

Input border width, in pixels.

integer

marginLeft

Input left margin, in pixels.

integer

marginRight

Input right margin, in pixels.

integer

Widget-specific expression evaluations

Property

Description

Data type

text

Example: #widget1.input1.text

string

Sample form controls

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Input",
                    "label": "Enter your name",
                    "id": "input1",
                    "placeholder": "name",
                    "event": {
                        "name": "eventinputchange"
                    },
                    "validation": {
                        "required": {
                            "value": true,
                            "error": "Name is required"
                        },
                        "pattern": {
                            "value": "^[0-9]+$",
                            "error": "only number "
                        },
                        "minlength": {
                            "length": 5,
                            "error": "enter min 5 chars"
                        },
                        "maxlength": {
                            "length": 5,
                            "error": "enter max 5 chars"
                        }
                    },
                    "helpText": "Name must be 8 characters long",
                },
                "1": {
                    "type": "Input",
                    "label": "Enter your name",
                    "id": "input1",
                    "placeholder": "name",
                    "context": {
                        "itemBackground": "#D3D3D3",
                        "textAlign": "left",
                        "text": "#0000ff",
                        "itemBorder": "#808080"
                    },
                    "controlContext": {
                        "borderColor": "#ff0000",
                        "borderWidth": 2,
                        "marginLeft": 20
                    }
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Input",
                    "label": "Enter your name",
                    "id": "input1",
                    "placeholder": "name",
                    "material": true,
                    "event": {
                        "name": "eventinputchange"
                    },
                    "validation": {
                        "required": {
                            "value": true,
                            "error": "Name is required"
                        },
                        "pattern": {
                            "value": "^[0-9]+$",
                            "error": "only number "
                        }
                    },
                    "helpText": "Name must be 8 characters long"
                }
            }
        }
    ]
}
var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "Input",
                    "label": "Enter your birthday",
                    "dateFormat": "dd/mm/yyyy",
                    "id": "input3",
                    "placeholder": "name",
                    "material": true,
                    "actionType": "date",
                    "event": {
                        "name": "eventinputchange"
                    }
                }
            }
        }
    ]
}