Lookup record

Try it out!

Note: The email addresses are displayed for demo purposes, so that you can test the lookup.

Scenario

In some Forms, it is important to verify that the entered details are correct before proceeding. For example, you may want to check that an email address matches against a policy through a REST API call, or SQL query.

---

Steps

1. In the Data section, click on your external Datasource, and click on the Queries tab. Click Create new query.

2. Add binding: 'email' and provide a valid default value
3. Enter your lookup query, e.g. select * from public."Employees" where "Email" = '{{email}}'
4. Click Run Query and then Save Query.
5. Clear the default value of the binding - it is no longer needed now that we have our schema saved. Make sure to Save Query again.

6. Navigate to the Design section, Add component: Form
7. Add component: Field Group, and set Type to 'Main with Sidebar'
8. Add component: Text Field, and enter a Field name and Label
9. Add component: Icon, and set the Icon, Size and Color

10. Click the button beside On click
11. Add Action: Execute Query
    1. Select the Datasource
    2. Select the Query
    3. Check Do not display default notification
    4. Provide the email binding, e.g. {{ Search Form.Fields.Search Email }}

12. Add Action: Update State
    1. Set value 'EmployeeID' to JavaScript binding:
    2. JavaScript

       return $("Action 1.Query result")?.data?.[0]?.["EMPLOYEE ID"]
       

13. Add Action: Continue if / Stop if

14. Add Action: Show Notification
    1. Set Type to 'Warning'
    2. Set Message to 'Employee not found!'
    3. Check Auto dismiss
15. Be sure to Save

16. Click on the Screen component (root level of the Component Tree). Add component: Repeater Block
17. In the Settings Panel, select the 'Employees' table, set Limit to 1, and click the button beside Filtering
18. Add filter: 'EMPLOYEE ID' Equals Binding {{ State.EmployeeID }} and Save

19. Click on the Conditions tab, and click Configure conditions
20. Add condition:
    1. Hide component IF {{ State.EmployeeID }} Is empty
    2. Save

21. Add component: Form, and set Type to 'Update', and the Schema to the 'Employees' table
22. Add component: Field group and click Update form fields

---

App export

Downloads may take a few seconds.