Skip to content

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

Return

Updating and resetting inputs in repeating lists

Keep per-row input values stable in repeating lists, and reset individual rows or the whole list.

Steps at a glance

  1. Create a repeating list bound to your data.
  2. Create a variable that stores edits per item (by ID).
  3. Bind each input value to “edited value or original value”.
  4. Update the variable on input change.
  5. Reset one row (or reset all rows) when needed.

1) Create a repeating list

  1. In the Interface, create a simple row layout (text + input + buttons).
  2. Select the parent container and enable Repeat Items.
  3. Bind Items to your list of records (for example a collection, a table view, or an API result).

2) Create a variable to store edits

  1. Create a variable called editsById.
  2. Set it as an object (it starts as an empty object {}).

This variable will store the user’s typed values per row, so inputs do not “jump” when the list refreshes or re-renders.

3) Bind the input value to the right row

Bind the input’s value so it uses the edited value if it exists, otherwise it falls back to the original item value.

Example pattern:

javascript
variables.editsById[item.id] ?? item.name

Replace:

  • item.id With the unique identifier for your list items.
  • item.name With the field you are editing (for example item.course, item.email, etc.).

4) Update the row value when the user types

On the input’s change event, update editsById for the current item.

Use a Change variable value action and set editsById to:

javascript
({
  ...variables.editsById,
  [item.id]: event.value,
})

This updates only the current row, without affecting other rows.

5) Reset inputs

Reset a single row

To reset one row back to its original value, remove its entry from editsById:

javascript
Object.fromEntries(
  Object.entries(variables.editsById).filter(([key]) => key !== item.id)
)

Reset all rows

To reset all inputs in the list, set editsById back to {}.

Common pitfalls

All rows change at the same time

  • This happens when every input is bound to the same variable.
  • Store values per item (for example editsById[item.id]) so each row has its own value.

Inputs reset when the list refreshes

  • If your input value is only bound to item.<field>, it will revert whenever the list updates.
  • Bind the value to “edited value or original value” so the user’s edits stay visible until you save or reset them.

Saving works but the UI does not update

  • After saving, either:
    • Refresh the data your list is bound to, or
    • Update the local list/variable so the interface shows the new values.