Set the Default Value Based on a User Input

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

Set the default value of a variable based on what the user enters in another component.

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 example only applies when the default value is based on the user's input in another component. See Set the Default Value of an Input on a Task Form recipe when the default value must be set as soon as the form is displayed and without requiring the user to interact with the form.

Expression

=load(
  local!username,
  local!email,
  local!emailModified: false,
  a!formLayout(
    label: "SAIL Example: Default Value Based on User Input",
    contents: {
      a!textField(
        label: "Username",
        instructions: "Value saved: " & local!username,
        value: local!username,
        saveInto: {
          local!username,
          if(local!emailModified, {}, a!save(local!email, append(save!value, "@example.com")))
        },
        refreshAfter: "KEYPRESS"
      ),
      a!textField(
        label: "Email",
        instructions: "Value saved: " & local!email,
        value: local!email,
        saveInto: {
          local!email,
          a!save(local!emailModified, true)
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidgetSubmit(
        label: "Submit"
      )
    )
  )
)

Test it out

  1. Type into the Username field and notice that the Email field is pre-populated.
  2. Type into the Username field, then modify the Email value, and type into the Username field again. The Email field is no longer pre-populated.

Notice that the value of username as well as the email address field are updated as you type. That's because the username input is configured with refreshAfter: "KEYPRESS"

To write your data to process

  1. Save your interface as sailRecipe
  2. Create interface inputs: username (Text), email (Text)
  3. Delete local variables: local!username, local!email
  4. In your expression, replace:
    • local!username with ri!username
    • local!email with ri!email
  5. In your process model, on the process start form or forms tab of an activity, enter the name of your interface in the search box and select it
  6. Click Yes when the process modeler asks, "Do you want to import the interface inputs?"
    • On a task form, this will create create node inputs
    • On a start form, this will create parameterized process variables
FEEDBACK