Define a Simple Currency Component

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

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
Open in Github Built: Wed, Dec 07, 2022 (10:13:16 PM)

On This Page

FEEDBACK