Dropdown
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.
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).
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.
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.

Default Value
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.
Example
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):
${dropdown.data.first_name} ${dropdown.data.last_name}
Then, in order to pass the customer's id along when their name is selected, you fill in "Value per Option" with:
${dropdown.data.id}
Sorting
Choose the field to sort by and then "Ascending" or "Descending".
Filters
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
Visibility Rules
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).
Design
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.