Text-area widget

The text-area widget supports the entry of multiple lines of text.

Example

Properties

Property

Description

Data type

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 text area 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

rows

Number of lines visible to user.

integer

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 it.

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

Context properties

These are the context properties.

Context property

Description

Data type

text

Label color, as a hex color code.

string (hex color code)

textAlign

Label alignment, which is one of: left | center | right.

enum

textSize

Label size, in pixels.

integer

textStyle

Label style, which is one of: normal | italic | bold.

enum

controlContext properties

These are the controlContext properties.

controlContext property

Description

Data type

borderColor

Text area border color, as a hex color code.

string (hex color code)

borderRadius

Text area border radius, in pixels.

 integer

borderWidth

Text area border width, in pixels.

 integer

marginLeft

Text area left margin, in pixels.

 integer

marginRight

Text area right margin, in pixels.

 integer

Validation properties

Property

Description

Data type

maxlength

Maximum length of input, in pixels.

 integer

minlength

Minimum length of input, in pixels.

 integer

pattern

Indicates whether user input matches the pattern.

string (regular expression)

required

Indicates whether user input is required.

Boolean

Widget-specific expression evaluation

Property

Description

Data type

text

Example: #widget1.textarea1.text

String

Code samples

 var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "TextArea",
                    "label": "Enter your comment",
                    "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": "TextArea",
                    "label": "Enter your comment",
                    "id": "input1",
                    "rows": 4,
                    "placeholder": "name",
                    "context": {
                        "itemBackground": "#D3D3D3",
                        "textAlign": "left",
                        "text": "#0000ff",
                        "itemBorder": "#808080"
                    },
                    "controlContext": {
                        "borderColor": "#ff0000",
                        "borderWidth": 2
                    }
                }
            }
        }
    ]
}

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "TextArea",
                    "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"
                }
            }
        }
    ]
}