Select values from a dropdown component to use with other components.
Add a dropdown to a form and use a function to populate the options. This allows the user to easily associate relevant records when creating or updating data.
Dropdowns can be configured in two ways, one without a source and one using a source to populate its choices.
You can give your component a name, and input placeholder text that will be shown in the dropdown (before a user selects an option).
1) Without a source, you'll manually define dropdown options:
Create dropdown options by inputting what you want displayed (Red Ball, Purple Shoe), and then the value you want to submit (redball, purpshoe), separated by a comma. Each option gets its own line.
Use this if you want the dropdown to default to a specific value before a user interacts with it.
2) Use a source to populate dropdown options:
Choose the function you want to use to populate this dropdown.
Then, you can set up what is displayed for each option ("Display Name per Option") using variables from the source you selected. Under "Value per Option" you can specify what value is to be passed when the corresponding display option is selected in the dropdown.
You want to create a dropdown that will show a list of your VIP customers, and pass their customer ID along as the value. You create a new dropdown component and choose to use a source - in this case you choose a function to "list customers records".
Then, you want to display each customer's name as the dropdown option; in your data you have customer names stored in "first_name" and "last_name" fields. You can display the full customer name by entering in the following under "Display Name per Option" (using the "Insert a variable" link):
Then, in order to pass the customer's id along when their name is selected, you fill in "Value per Option" with:
Choose the field to sort by and then "Ascending" or "Descending".
Set rules to determine which records are used to populate the dropdown.
Each filter has a field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component.
Preset filter examples:
For a dynamic filter, choose a "value from component" option. For example, if you want to compare the company_id with the id from the Companies table, you could select:
You can create visibility rules that will determine when this component is visible and able to be interacted with. (Visibility rules do not apply on dropdowns applied to forms).