Pro Config Example: Remembering user input for input prompts

Sometimes, when a button pops up a dialog to input some fields, the user expects them to be auto-filled and “remembered”, so they can just refill and slightly tweak other fields in the meantime. To accomplish this in Pro Config, we can use automata context variables to store the input from the user, and use it as default value.

Here’s an example config doing this:

{
  "type": "automata",
  "id": "remember_input_example",
  "initial": "home_state",
  "inputs": {},
  "outputs": {},
  "context": {
    "name": "John",
    "gender": "Male"
  },
  "transitions": {},
  "states": {
    "home_state": {
      "inputs": {
        "name": {
          "name": "Name",
          "type": "text",
          "user_input": true,
          "default_value": "{{context.name}}"
        },
        "gender": {
          "name": "Gender",
          "type": "text",
          "user_input": true,
          "default_value": "{{context.gender}}"
        }
      },
      "outputs": {
        "context.name": "{{name}}",
        "context.gender": "{{gender}}"
      },
      "render": {
        "text": "Your name is {{name}} and you are a {{gender}}.",
        "buttons": [
          {
            "content": "Retry",
            "on_click": "retry"
          }
        ]
      },
      "transitions": {
        "retry": "home_state"
      }
    }
  }
}

In the above config, we first define two context variables in the automata that will serve as the inputs in the dialog box that the user can enter. Note that we set the default value of those inputs here, in the automata. In this case, the name is John and the gender is Male.

In the state’s inputs, the default_value is set to the respective context. By default this is equivalent to specifying it directly here, but that changes when the user types something else.

The outputs are important: they store the choices that the user input back into the automata context variables. Since these context variables are used as the default value for the dialog box, this basically makes it remember the user’s choices, so if they go back after entering “Jane” and “Female”, it will remain that way.

Clicking on the Retry button will show this in practice.