The Dropdown component allows you to select values from a dropdown 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 appropriate 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 pre-fill 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):
Then, in order to pass the customer's id along when their name is selected, you fill in "Value per Option" with:
Only the first 5000 records are pulled when populating options from a source. You can use filters and sorting to narrow down/specify the records you want to use in this dropdown component.
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:
- Battery_level [is less than] 20
- Status [is not equal to] VIP
- Email [contains] "@gmail.com"
- LastName [is not null]
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:
- company_id [is equal to component value] CompaniesTable.selectedrow.data.id
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).
You can customize the design attributes of the Dropdown component.
Updated 3 months ago