Format the User's Input

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

Format the user's input as a telephone number in the US and save the formatted value, not the user's input.

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

This expression uses the text() function to format the telephone number. You may choose to format using your own rule, so you would create the supporting rule first, and then create an interface with the main expression.

This scenario demonstrates:

  • How to configure a field to format a user's input

Expression

1
2
3
4
5
6
7
8
9
10
11
12
a!localVariables(
  local!telephone,
  a!textField(
    label: "Employee Telephone Number",
    instructions: "Value saved: " & local!telephone,
    value: local!telephone,
    saveInto: a!save(
      local!telephone,
      text(save!value, "###-###-####;###-###-####")
    )
  )
)

Test it out

  1. Enter 1234567890 then click somewhere else on the form. Notice that the phone number is now formatted.
Open in Github Built: Fri, Jun 03, 2022 (01:08:29 PM)
FEEDBACK