Components

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.

Example:
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).

Example:
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.

Example:
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.

‍

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}

‍

Note: 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.

‍

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.

‍

Getting Started

Tutorials

Data Sources

Functions

Pipeline Functions

Spaces

Queues

Automations