Add Multiple Text Components Dynamically

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

Goal

Show a dynamic number of text components to simulate a multi-text input box. A new text box is shown as soon as the user starts typing into the last input box.

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 scenario demonstrates:

  • How to configure SAIL components to dynamically appear using a a!forEach() loop

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
=load(
  local!guests: {""},
  a!formLayout(
    label: "SAIL Example: Add Text Components Dynamically",
    contents: {
      a!forEach(
        items: local!guests,
        expression: a!textField(
          label: if(fv!isFirst, "Guest Names", ""),
          value: fv!item,
          saveInto: {
            fv!item,
            if(
              fv!isLast,
              a!save(local!guests, append(local!guests, "")),
              {}
            )
          },
          refreshAfter: "KEYPRESS"
        )
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidgetSubmit(
        label: "Submit"
      )
    )
  )
)

Test it out

  1. Type into the text field and notice that an empty one is appended
FEEDBACK