Define a Simple Currency Component

Goal

Show a text field that allows the user to enter dollar amounts including the dollar symbol and thousand separators, but save the value as a decimal rather than text. Additionally, always show the dollar amount with the dollar symbol.

This scenario demonstrates:

• How to configure an interface component to format a user's input

Expression

1
2
3
4
5
6
7
8
9
10
11
a!localVariables(
  local!amount,
  a!textField(
    label:"Amount in Text",
    /* Instructions  show the saved datatype*/
    instructions: "Type of local!amount: " & typename(typeof(local!amount)),
    value: if(isnull(local!amount), "", dollar(local!amount)),
    /* Instead of saving the value as text, a!save() is used to store to the desired datatype*/
    saveInto: a!save(local!amount, todecimal(save!value))
  )
)

Test it out

1. Enter $12345 and click away from the field. Notice that the text box shows $12,345.00 and that the saved value is a decimal.
2. Enter $12,345.23 and click away from the field.
3. Enter a1b2c3 and click away. Notice that the text box removes the non-numeric characters and treats the remaining as a decimal value. A true currency component would catch this as an error case, hence why this is called a simple currency example.

Notable Implementation Details

• Because dollar() will not accept a null value, we set the value conditionally until local!amount has a value

Feedback