Populate form fields on select

Try it out!

Scenario

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.

---

Steps

1. Add component: Form
2. Add component: Data Provider
3. In the Settings Panel, select the 'Employees' table
4. Untick Paginate

5. Add component: Options Picker
6. In the Settings Panel, type in a Field name and Label
7. Check Autocomplete
8. Select 'Data provider' as the Options source
9. Select 'Email' as the Label column and '_id' as the Value column

10. In the Data section, right-click the 'Employees' row you want to be the Default Value. Click Copy row _id.

11. Back to the Design section, paste the row _id you copied into the Default value setting of the Options Picker
12. Click the button beside On change. Add Action: Update State
    1. Set value 'SelectedEmployee' to {{ Field Value }}
    2. Be sure to Save

13. Click on the Screen component (root level of the Component Tree). Add component: Form Block
14. In the Settings Panel, set Type to 'Update', and Table to 'Employees'
15. Set Row ID to {{ State.SelectedEmployee }}
16. Untick Show save button

---

App export

Downloads may take a few seconds.