Form with typeahead screen template

The form with typeahead screen is a low code screen template.
The typeahead field allows you to search for a person by their name. You can select a person, then search and select more. When you submit the form it saves the list of selected individuals in a comma-separated list of their emails (looked up against a user data source). We use email here because it is a unique value, but you are able to adjust this in the screen Javascript.

A list of emails will also allow you to easily look up the individuals (with our Javascript API) in the user data source and display more information about them on a different screen.
For example, we have a list of Speakers that are generated by a similar typeahead field inside Agenda sessions in the Event template.

This article explains the steps required to set up the form and enable it to work with your data.

Get Started

To use the form with typeahead you will need to:

1. Add the screen template
2. Configure the form and settings 
3. Configure the JavaScript
4. Test the form

Step 1 – Add the screen template

1. Add the “form with typeahead” screen template to your app using the ‘Add screen’ button
2. Click on the Data capture tab
3. Select form with typeahead and click “add 1 new screen”
4. Enter a screen name and select “add screen”

Step 2 – Configure the form and settings

1. Set up your form and add any additional fields required.
2. Once you are happy with how your form is set you will need to configure the settings. Click here to learn more on setting up a form
3. Click the form and click the settings tab on the right-hand side menu
4. The data source will need to be updated to the data source you want to form submissions to save to
5. Click “change”
6. Click “Create new data source”
7. Name your data source
8. Click configure security rules
9. Click ok and then save and close

Step 3 – Configure the JavaScript

1. With the screen open, open the developer options by selecting the </> icon on the right-hand side
2. Click tabs, and view the Javascript
3. Lines 3-7 will need to be updated to match your data
4. Line 3 requires the exact name of the data source where the data for the typeahead can be found, in our case, this is “Screen templates – Users”. For example, if you want your typeahead to display a list of names, you should add the name of the data source where these names can be found
5. Line 4 requires the name of the column in the data source that holds the typeahead data, in our case this is “Name”
6. Line 5 requires the name of the field you want this form data to save as. We recommend using Email as this is a unique value
7. Line 6 requires the name of the form field where the typeahead should display, in our case this is “Users”
8. Line 7 is optional but recommended if your data source has lots of entries. You can replace “null” with a number to limit the number of typeahead options shown in the drop-down
9. Click save and run

Step 4 – Test the form

1. To test your form, switch to preview mode
2. Fill in the form and click the submit button, you should be redirected to the chosen screen or shown the confirmation message
3. Switch back to edit mode, and open your new data source created in step 2
4. Check that the values were recorded in the data source