Add Multiple Text Components Dynamically

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 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 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

a!localVariables(
  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
Open in Github Built: Fri, May 26, 2023 (08:44:55 PM)

On This Page

FEEDBACK