The form with typeahead screen is a low code screen template.
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.
To use the form with typeahead you will need to:
Step 1 – Add the screen template
- Add the “form with typeahead” screen template to your app using the ‘Add screen’ button
- Click on the Data capture tab
- Select form with typeahead and click “add 1 new screen”
- Enter a screen name and select “add screen”
Step 2 – Configure the form and settings
- Set up your form and add any additional fields required.
- 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
- Click the form and click the settings tab on the right-hand side menu
- The data source will need to be updated to the data source you want to form submissions to save to
- Click “change”
- Click “Create new data source”
- Name your data source
- Click configure security rules
- Click ok and then save and close
- With the screen open, open the developer options by selecting the </> icon on the right-hand side
- Lines 3-7 will need to be updated to match your data
- 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
- Line 4 requires the name of the column in the data source that holds the typeahead data, in our case this is “Name”
- 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
- Line 6 requires the name of the form field where the typeahead should display, in our case this is “Users”
- 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
- Click save and run
Step 4 – Test the form
- To test your form, switch to preview mode
- Fill in the form and click the submit button, you should be redirected to the chosen screen or shown the confirmation message
- Switch back to edit mode, and open your new data source created in step 2
- Check that the values were recorded in the data source