Populate form fields on select

Auto-filling a form for a chosen record

Try it out!


Given have a Form block that displays some fields for a table record, you want the End User to be able to select a record from an Options picker and update the form fields with the correct information.

App state will be used to allow communication between our search field, and the details form.



  1. Add component: Form
  2. Add component: Data Provider
  3. In the Settings Panel, select the 'Employees' table
  4. Untick Paginate
  1. Add component: Options Picker
  2. In the Settings Panel, type in a Field name and Label
  3. Check Autocomplete
  4. Select 'Data provider' as the Options source
  5. Select 'Email' as the Label column and '_id' as the Value column
  1. In the Data section, right-click the 'Employees' row you want to be the Default Value. Click Copy row _id.
  1. Back to the Design section, paste the row _id you copied into the Default value setting of the Options Picker
  2. Click the button beside On change. Add Action: Update State
    1. Set value 'SelectedEmployee' to {{ Field Value }}
    2. Be sure to Save
  1. Click on the Screen component (root level of the Component Tree). Add component: Form Block
  2. In the Settings Panel, set Type to 'Update', and Table to 'Employees'
  3. Set Row ID to {{ State.SelectedEmployee }}
  4. Untick Show save button

App export

Downloads may take a few seconds.