Retool Form conditional dynamic options in a Select

💬 App Building
1

Hi everyone!

  1. My goal:
    In a Retool Form, I have a Select A and a Select B. I want to filter the Select B options dynamically retrieved regarding what I previously selected in the Select A.
    This in order to avoid multiply the form fields.

  2. Issue:
    I can dynamically retrieve some values from a table to populate the Select but unable to filter them.

A solution like the Cascader component available for Retool Forms would be amazing!

Does it make sense?

Cheers :slight_smile:

2

Hello @sacha!

Are the values for both Selects coming from a single source? For example, you have a table/list of values:
['A', 'B', 'C', 'D', 'E']

Both Select A and Select B have this array of selections, but if someone were to choose a value in either component, the other would have to show what is left to choose from?

In this example, if I selected 'C' in Select A, then the choices in Select B should be:
['A', 'B', 'D', 'E']

Is this the use case?

3

Good afternoon @pyrrho!

I don't think this is the use case I'm talking about unfortunately.
Each Select would have his own list of values, and a value selected in Select A would filter the list of Select B as Select B values could be considered like children of Select A values.

4

Perfect! This helps me understand the structure of your data a bit better.

I believe you want to explore something like an object which uses root keys to be the selection values for Select A and the values would be an array of options for Select B.

Consider the A B C D E array from my last post, but visualize it as a JS Object instead (I'm going to call it options:

{
  'A': ['a', 'b', 'c'],
  'B': ['d', 'e', 'f'],
  'C': ['g', 'h', 'i'],
  'D': ['j', 'k', 'l'],
  'E': ['m', 'n', 'o']
}

You could use this single object for both Select components with Select A using Object.keys(options.value) as the mapped data source:

image
image320×189 6.09 KB

and Select B using the value from Select A to retrieve the array of values for the selected key {{ options.value[selectA.value] }}:

image
image1876×383 32.2 KB

5

Hello @pyrrho,

I think there is a misunderstanding here I'm sorry. I was talking about Retool Forms, not using a form component in a Retool App.

With Retool Forms, as far as I know, it isn't possible to use a dynamic data source using Javascript. I can only use Manual options or Dynamic values from a Resource. In my case, a Retool DB table field.

1 Like
6

Hi @sacha,
In Retool Forms, Select fields can only use manual options or dynamic values from a connected resource — unfortunately, custom JavaScript filtering isn’t supported at the moment.

A simple workaround:

You can create a separate Select B field for each possible value of Select A, and use visibility rules to display the right one based on the user’s selection.

It’s not ideal for complex forms, but it works well enough in straightforward cases.

7

Hey @Adnan_Khalil1!

I was trying to avoid this workaround but thanks for the suggestion I appreciate :grin:

8

Totally get that — not the cleanest workaround :sweat_smile:. Hopefully Retool adds more flexibility soon!

1 Like