Currency 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 Currency Input widget is a field for an amount of money, such as a price or an expense. It shows the currency symbol, such as $, inside the field.

• Users can type digits only. They can also type the decimal and thousands separators when Decimals allowed is more than 0.
• The number of decimal places is limited to Decimals allowed.
• When the field loses focus, the amount is formatted with thousands separators and the set number of decimal places, for example 1,234.50. When the field gets focus again, the thousands separators are removed for editing.

Widget type: WDS_CURRENCY_INPUT_WIDGET

Currency 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 Currency. 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, Number changes it into a Number Input.

Data

Default value number

Sets the starting amount. When this value changes, the field updates to the new value.

• The value must be a number. Leave it empty for no starting amount.
• Use . as the decimal separator, even if your locale uses another separator.
• The number of decimal places cannot be more than Decimals allowed.

Example:

{{AnvilTable1.selectedRow.price}}

Currency string

Sets the currency. Pick a currency from the searchable list, or bind a currency code. Default: USD.

Example:

EUR

Allow currency change boolean

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

Decimals allowed number

Sets how many decimal places users can enter. Options: 0, 1, or 2. Default: 0.

Label

Text string

The label shown above the field. Default: Current Price.

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 value as typed (the rawText value) against a regular expression. If it does not match, the field is invalid and shows Error message.

Example:

^\d{1,6}$

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:

{{Number(CurrencyInput1.rawText) <= 5000}}

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

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

text string

The amount as shown in the field. When the field does not have focus, this includes thousands separators, for example 1,234.50.

Example:

{{CurrencyInput1.text}}

rawText number

The amount without formatting. Use this value in queries and calculations.

Example:

{{CurrencyInput1.rawText}}

currencyCode string

The selected currency code, for example USD.

Example:

{{CurrencyInput1.currencyCode}}

countryCode string

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

Example:

{{CurrencyInput1.countryCode}}

isValid boolean

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

Example:

{{CurrencyInput1.isValid}}

isVisible boolean

Shows whether the widget is visible.

Example:

{{CurrencyInput1.isVisible}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{CurrencyInput1.isDisabled}}

isReadOnly boolean

Shows whether the widget is read-only.

Example:

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

CurrencyInput1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns Disabled on or off.

Example:

CurrencyInput1.setDisabled(false)

setRequired (param: boolean): Promise

Turns Required on or off.

Example:

CurrencyInput1.setRequired(true)

setReadOnly (param: boolean): Promise

Turns Readonly on or off.

Example:

CurrencyInput1.setReadOnly(true)

setValue (param: string): Promise

Sets the amount in the field.

Example:

CurrencyInput1.setValue("250")

Events

The Events section shows only when Readonly is off.

onTextChanged

Runs each time the user changes the amount.

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.