We’ve launched a brand new, Filtered typehead screen template to enable you to select a first option from the data source and filter the second option accordingly.
How do I use this screen template?
Note that this is a low code screen template, the screen JavaScript will need to be updated.
You can use this screen to add a form with a dropdown containing values from a data source, eg you can add a data source that includes the Regions and Countries, when you select the main region, eg Europe, you will only see the list of European countries in the second dropdown.
What does this screen template do?
This screen template easily lets you add a form with typehead fields containing data from a data source that allows you to use the first option as a filter and the second option will only display the relevant entries.
This is super useful as you don’t need to update the values in the dropdowns manually, these will be dynamically added from the selected data source.
How do I customize this screen template?
You can update the form accordingly, for more information on how to update the form component, refer to this article.
The typehead fields will need to be updated to reflect the data in your data source, then you will need to access the screen JavaScript and update the variables accordingly:
let dataSourceName = 'Countries'; // update the ‘Countries’ text with your data source name
let mainTypeaheadField = 'Region'; // update the ‘Region’ text with your column name, note that this is the main selector, selecting this option will filter the secondaryTypeheadField options
let secondaryTypeahedField = 'Country'; // update the ‘Country’ text with your column name, note that these options will be pre-filtered according to what is selected on the mainTypeheadField variable
let groupedBy = 'Region'; // update the ‘Region’ text with your column name, note that this option should be the same as the mainTypeheadField
let secondaryTypeahedColumnName = 'Country'; //update the ‘Country’ text with your column name, note that this option should be the same as the secondaryTypeahedField