Select values from a dropdown component to use with other components.
Ways to use a dropdown
Use it with forms to easily associate records.
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.
You add a dropdown to a form that Creates User Records that is powered by the User Records function. You select company_name as the display option and company_id as the actual value. When using the form to create a new user, you can now use the dropdown to search for the company name to associate the approprate company_id.
Provide input value for several components filters
By binding a dropdown to multiple components (such as tables, detail or card lists), multiple sets of data can be filtered on a single criteria (when a dropdown selection is made).
You add a dropdown component called CompanyType, with entries for Individual, SMB, Enterprise. You bind this to the Employees, Orders, and Inventory tables in your space to find records for those company types.
Use its value to prefill fields in another component
Sometimes you may want to use the value in the dropdown component as a field in components like buttons or forms.
You have an “Enable” button that requires a State field. You can bind this to a dropdown component (with each state as a potential selection), so that whenever this button is clicked, the State selected in the dropdown component is used as the State.
Configuring your dropdown
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):