Dropdown

Capture user input from a list of choices.

Dropdown components are useful for capturing user input for a single choice or multiple choices of various options.

Manually set dropdown options

Start by dragging a Dropdown component from the Components panel.

The default data that populates the dropdown is an array of objects, where each object contains a label and value key. The label is the text shown in the dropdown option, whereas the value is the output resulting from selecting that item in the dropdown. This value can be fed into other components and APIs via {{<DROPDOWN_NAME>.selectedOptionValue}} for a single choice or {{<DROPDOWN_NAME>.selectedOptionValues}} for multiple choices. (see section for Trigger an API on select).

Alternatively, you can configure Options as a simple array of strings if the value and label for each option are expected to be the same.

Customize dropdown label and default text

Edit the dropdown Label and Default selected value string(s), or Placeholder text if no default value is selected.

Toggle interaction and display settings

To allow users to select more than one option in the dropdown, toggle the Enable Multi-select switch. If selecting an option in the dropdown is necessary before proceeding to subsequent steps, enforce user input via Required. Additionally, the dropdown can be disabled by either setting user interaction as Disabled or toggling the Visible option to hide the component.

Note, to set multiple default selected values for a multi-select dropdown, add an array of the value strings inside bindings. For example, {{["TORONTO", "NEW YORK"]}}.

Dynamically set dropdown options from API response

Create an API called getOrders that queries the [Demo] Orders Postgres Database.

Reference the API response in the dropdown component Options via {{getOrders.response}}. Superblocks automatically configures the Value Field with one of the table columns from the resulting SQL response. Here we've configured the order id field to allow users to select specific orders from the dropdown and perform additional processing or investigation on those.

Trigger an API on select

Using the previous example, the user can next filter a table of order statuses based on the selected order id. To do so, first create an API that gets the Shipping History for an order from Snowflake. Reference the selected order id from OrderDropdown with {{OrderDropdown.selectedOptionValue}}.

To ensure this API is called when the dropdown option is selected, configure the dropdown's onOptionChange trigger.

Add a Table component below the dropdown and configure the Table Data to bind to {{getShippingHistory.response}}. The table will now update to reflect the order id selected in the dropdown.

Use Python to convert lists to an array of JSON objects

In order to convert a list of labels and values to an array of objects to be used within the Dropdown component, a list comprehension can be used in Python to do this. For example, take the following list of labels and values:

my_labels = ["New York", "Toronto"]
my_values = ["NEW YORK", "TORONTO"]

The following code can be used in a Python step in order to generate an array of JSON objects seen below:

return [{"label": i, "value": j} for i,j in zip(my_labels, my_values)]

[
  {
    "label": "New York",
    "value": "NEW YORK"
  },
  {
    "label": "Toronto",
    "value": "TORONTO"
  }
]

Dropdown Properties

Component Properties

Property	Description
Label	Set the text label for the dropdown
Options	Enter an array of objects with a label and value property, these the labels will be presented to the user and values used with {{dropdown.selectedOptionValue}}
Default selected value strings	Choose the default value
Placeholder	Text to inform the user of action like "Select a city"
Enable Multi-select	Allows the user to select multiple options from the dropdown. This can be access via {{dropdown.selectedOptionValues}}
Enable Clearing	When enabled, allows the user to clear selected options with an x button, values are a boolean
Required	Makes selecting an option mandatory, values are a boolean
Loading Animation	Controls the loading state of the component, values are a boolean
Visible	Set true to show and false to hide. Set dynamically using Javascript with {{}}
Vertical	Toggles the location of the label, values are a boolean
Disabled	Disables user interaction with this component, values are a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Dropdown, and dot referencing the property. For a Dropdown named Dropdown1:

Property	Description
Dropdown1.selectedOptionValue	Returns a string of the selected value of the dropdown
Dropdown1.selectedOptionValues	Returns an array of the selected values of the dropdown
Dropdown1.options	Returns an array of the options of the dropdown
Dropdown1.isVisible	Returns the boolean value of the component's visibility (True, if it is visible)
Dropdown1.isDisabled	Returns the boolean value of the component's disabled state (True, if it is disabled)

Events

The following events are triggered by user interactions with Dropdown components. Use event handlers to trigger actions in response to user events.

Property	Description
onOptionChange	Trigger an action when the selected option is changed
onClear	Trigger an action when the dropdown is cleared