Phone 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 Phone Input widget is a field for a phone number. It shows a country dial code, such as +1, and can format the number as the user types.

• Users can type digits only. Other keys are blocked, apart from keys such as Backspace, Tab, Enter, Delete, and the arrow keys.
• With formatting on, the number is formatted for the selected country, for example (555) 123-4567 for the United States.

Widget type: WDS_PHONE_INPUT_WIDGET

Phone 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 Phone number. 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

Default value string

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

Example:

{{AnvilTable1.selectedRow.phone}}

Default country code string

Sets the starting dial code. Pick a country from the searchable list, or bind a dial code. Default: +1 (United States).

Example:

+44

Change country code boolean

Lets users pick a different dial code from a list in the field. Off by default.

Enable formatting boolean

Formats the phone number for the selected country as the user types. When it is off, the field shows the number without formatting. On by default.

Label

Text string

The label shown above the field. Default: Phone number.

Validation

Required boolean

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

Regex string

Checks the unformatted number (the rawText value) against a regular expression. If it does not match, the field is invalid and shows Error message.

Example:

^\d{10}$

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:

{{PhoneInput1.rawText.length >= 7}}

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, for example (123) 456-7890.

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.

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 {{PhoneInput1.isVisible}}. You cannot set them directly.

text string

The phone number as shown in the field. When Enable formatting is on, this is the formatted number.

Example:

{{PhoneInput1.text}}

rawText string

The phone number without formatting.

Example:

{{PhoneInput1.rawText}}

dialCode string

The selected dial code, for example +1.

Example:

{{PhoneInput1.dialCode}}

countryCode string

The two-letter country code for the selected dial code, for example US. It updates when the dial code changes.

Example:

{{PhoneInput1.countryCode}}

isValid boolean

Is true when the value passes all checks: Required, Regex, and Valid. Without a Regex, the unformatted value must be a number. An empty field that is not required is valid.

Example:

{{PhoneInput1.isValid}}

isVisible boolean

Shows whether the widget is visible.

Example:

{{PhoneInput1.isVisible}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{PhoneInput1.isDisabled}}

isReadOnly boolean

Shows whether the widget is read-only.

Example:

{{PhoneInput1.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:

PhoneInput1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns Disabled on or off.

Example:

PhoneInput1.setDisabled(false)

setReadOnly (param: boolean): Promise

Turns Readonly on or off.

Example:

PhoneInput1.setReadOnly(true)

setRequired (param: boolean): Promise

Turns Required on or off.

Example:

PhoneInput1.setRequired(true)

setValue (param: string): Promise

Sets the phone number in the field.

Example:

PhoneInput1.setValue("5551234567")

Events

The Events section shows only when Readonly is off.

onTextChanged

Runs each time the user changes the number.

onFocus

Runs when the field gets focus.

onBlur

Runs when the field loses focus.

onSubmit

Runs when the user presses Enter. It runs only when the value is valid.

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.