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.

images:SAIL_Recipt_DynamicText_Components.png

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

=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