Add Multiple Text Components Dynamically

Interface patterns give you an opportunity to explore different interface designs. To learn how to directly use patterns within your interfaces, see How to Adapt a Pattern for Your Application.

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 interface 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
31
=load(
  local!guests: {""},
  a!formLayout(
    label: "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!buttonWidget(
        label: "Submit",
        submit: true
      )
    )
  )
)

Test it out

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