Free cookie consent management tool by TermsFeed Add Multiple Text Components Dynamically
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, Nov 10, 2023 (03:42:48 PM)
FEEDBACK