Define option lists

Use the option list editor to configure options manually or map data to generate them dynamically.

πŸ“˜

We are currently rolling out the option list editor to various components. Check back soon if it isn't yet available for you.

Many components present a list of options, such as the dropdown in a Select or the menu of a Split Button. Each option contains a number of settings depending on the componentβ€”value, label, caption, tooltip, and disabled, and more.

You can manually configure each option or dynamically generate them by mapping data from a query, transformer, or any other source.


Configure options manually

Select Manual mode in the Options settings of the Inspector to configure options using a reorderable list. This mode is best suited for lists that contain:

  • A small, maintainable number of options.
  • Options that are static (e.g., not from an API or database).
  • Options used by only one component.

Click + Add to add a new option and configure the available settings, or click an existing option to edit. You can duplicate or delete an option by clicking the ... icon.

Manually define each option and configure its settings.Manually define each option and configure its settings.

πŸ“˜

The value (or key for some components) must be unique for each option. If duplicate values are found, only the first option is rendered.


Map data to generate options

Select Mapped mode in the Options settings of the Inspector to generate options from a data source. This is similar to using a .map method on an array: each item in your data source is mapped to each option. This mode is best suited for lists that contain:

  • A large number of options.
  • Options with a dynamic data source (e.g., from an API or database).
  • Options used by multiple components.

Specify a data source

Specify the data to evaluate in the Data source setting. Select from your queries or transformers, or switch to JavaScript mode (fx) to provide an array of values or an object of arrays by key. You can also reference data from anywhere in your app.

Select a data source to evaluate.Select a data source to evaluate.

πŸ“˜

Selecting Use JavaScript or Use an array switches the field to an input. Click 𝘧π‘₯ to switch back to a dropdown menu.


Configure mapped options

The Mapped options section contains settings that are evaluated for each item in your data source.

Use item to reference the current data source item being evaluated and i to reference the current index. For example, if the items in your data source have an id ([{ id: 1 }, { id: 2 }]), reference this using {{ item.id }} in any setting.

You can test out mapped options by generating sample data from Retool's REST API Generator app.

Column titleData typeDescription
nameNumbers/Product IDProduct SKU
quantityNumbers/RandomItem quantity
unit_price_centsNumbers/RandomItem price in cents
created_atDatesDate created

Click Generate API to generate a test API and save its URL. You can now use this sample data to map options from a query.

First, create a query:

  1. In the query editor, choose RESTQuery (restapi).
  2. Select GET as the Action Type.
  3. In the URL field, enter the endpoint URL you created.
  4. Click Run. You should see results from the sample API data.

Next, add and configure a Select component:

  1. Drag a Select component to the canvas.
  2. Select Mapped mode.
  3. Set Data source to the query you created.

You can now map option settings using item.

Mapped option settingEvaluated item data
Value{{ item.id }}
Label{{ item.name }}
Caption{{ '$' + (item.unit_price_cents / 100 ).toFixed(2) }}
Tooltip{{ moment(item.created_at).format("MMM Do YY") }}
Disabled{{ item.quantity == 0 }}

Options mapped from query, updated with JavaScript logicOptions mapped from query, updated with JavaScript logic

You can use JavaScript almost anywhere in Retool and create logic that provides greater flexibility. In this example, item.unit_price_cents and item.created_at are displayed in a more readable format, and options for products with quantity: 0 are disabled.