Multiline Input (ALPHA)

BusinessEnterprise

Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Multiline Input widget is a text area for longer text that spans several lines, such as notes, comments, or an address. Pressing Enter adds a new line. To submit, users press Ctrl+Enter, or Cmd+Enter on a Mac.

The Multiline Input has the same properties as the Input widget, with Data type set to Multi-line text. It has no icon options.

Widget type: WDS_MULTILINE_INPUT_WIDGET

Multiline Input widget

Content properties

These properties appear in the Content tab of the property pane.

Type

Data type string

Sets the type of data the field takes. For this widget it is Multi-line text. Options:

• Single-line text
• Multi-line text
• Number
• Password
• Email
• Phone number
• Currency
• Date

When you pick a different type, the widget changes into the matching widget. For example, Single-line text changes it into an Input.

Data

Value string

Sets the starting text of the field. When this value changes, the field updates to the new value. Numbers are turned into text.

Example:

{{AnvilTable1.selectedRow.notes}}

Label

Text string

The label shown above the field. Default: Label.

Validation

This section shows only when Readonly is off.

Required boolean

Makes the field mandatory. If a user clears the field, it shows "This field is required." Off by default.

Max characters number

Sets the most characters a user can enter. Must be a whole number of 1 or more. If the text is too long, the field shows "Input text length must be less than N characters."

Spellcheck boolean

Lets the browser check the text for spelling errors. You cannot bind this property with JavaScript.

Regex string

Checks the value against a regular expression. If the value does not match, the field is invalid and shows Error message.

Example:

^[^<>]*$

Valid boolean

Sets whether the value is valid, using a JavaScript expression. If the expression returns false, the field is invalid and shows Error message. Default: true.

Example:

{{MultilineInput1.text.split("\n").length <= 5}}

Error message string

The message shown when the Regex or Valid check fails.

General

Tooltip string

Adds a help icon next to the label. Users see this text when they open the help icon.

This property shows only when Readonly is off.

Placeholder string

Text shown inside the field when it is empty.

This property shows only when Readonly is off.

Visible boolean

Controls whether the widget shows in the app. On by default.

Disabled boolean

Stops users from typing in the field. Off by default.

This property shows only when Readonly is off.

Readonly boolean

Lets users select the value but not change it. Readonly takes priority over Disabled. Off by default.

When you turn this switch on in the property pane, the widget changes into a KeyValue widget that shows the value as read-only text. When you turn it off, the widget changes back to the type set in Data type.

Animate loading boolean

Shows a loading animation while the widget loads. On by default.

Auto focus boolean

Puts the cursor in the field when the page loads. Off by default.

This property shows only when Readonly is off.

Reference properties

Reference properties let you read the widget's state in bindings and code, for example {{MultilineInput1.isVisible}}. You cannot set them directly.

text string

The current value of the field.

Example:

{{MultilineInput1.text}}

rawText string

The value exactly as the user typed it.

Example:

{{MultilineInput1.rawText}}

isValid boolean

Is true when the value passes all checks: Required, Regex, Valid. An empty field that is not required is valid.

Example:

{{MultilineInput1.isValid}}

isVisible boolean

Shows whether the widget is visible.

Example:

{{MultilineInput1.isVisible}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{MultilineInput1.isDisabled}}

isReadOnly boolean

Shows whether the widget is read-only.

Example:

{{MultilineInput1.isReadOnly}}

Methods

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise

Shows or hides the widget.

Example:

MultilineInput1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns Disabled on or off.

Example:

MultilineInput1.setDisabled(false)

setReadOnly (param: boolean): Promise

Turns Readonly on or off.

Example:

MultilineInput1.setReadOnly(true)

setRequired (param: boolean): Promise

Turns Required on or off.

Example:

MultilineInput1.setRequired(true)

setValue (param: string): Promise

Sets the value of the field.

Example:

MultilineInput1.setValue("First line")

Events

The Events section shows only when Readonly is off.

onTextChanged

Runs each time the user changes the text.

onFocus

Runs when the field gets focus.

onBlur

Runs when the field loses focus.

onSubmit

Runs when the user presses Ctrl+Enter, or Cmd+Enter on a Mac. Pressing Enter alone adds a new line.

Reset on submit boolean

This setting appears in the Events section. When it is on, the field clears after onSubmit runs without errors. On by default.