Create conditional dropdown forms

Queries and Resources
1

I’m trying to create conditional forms, for example, let’s say there are dropdown A and dropdown B.
When I select value 1 in dropdown A, the values in dropdown B will change. For example, suppose dropdown A is countries. Dropdown B might be states/regions. If a user chooses USA in dropdown A, in dropdown B it should only show the states for the US.

2

Hey @anobody (clever name btw :smile:)!

There are a few different ways to do this. The easiest way might be the following:

  • Define your dataset for Dropdown A (can be static or powered by a query).
  • Create a transformer that calculates the correct value for Dropdown B by watching for changes in Dropdown A. For example, if you have a query1 that returns a list of countries and their respective states as an object (as this Countries GraphQL API does), you could add this code [0] into a transformer to return the states from the selected country in Dropdown A.
  • Finally, assign {{transformer1.value}} to the value for Dropdown B.

Now as you make selections in Dropdown A, the value for Dropdown B will dynamically change with it.

Here's a quick GIF of it in action:
Shared with Zight

And here the JSON file of the app from the GIF. You can import it into your instance of Retool. The one part that will be broken is the query that I'm using to pull the countries list. You can simply add a new GraphQL resource with the base domain https://countries.trevorblades.com/ and the label Countries and it will work just fine.

[0] Code for transformer:

let selectedCountry = {{query1.data.countries}}.filter(x => x.name == {{select1.value}});
                                         
return selectedCountry[0].states.map(x=>x.name)
3

Hi,

I tried following this method but the screen recording is no longer accessible and I think some of this code is outdated.

So far my code is

let selectedCountry = {{query1.data.countries}}.filter(x => x== {{select1.value}});

return selectedCountry[0].states.map(x=>x.name)

I don't think selectedCountry[0].states exists but I'm not sure how to include that in the filter because it doesn't seem to like filtering objects.

4

I figured out how to make it work and the key is to use the formatDataAsArray function. Here is the code that works for me

let selection = {{formatDataAsArray(query1.data)}}.filter(x=>x.countries == {{select1.selectedLabel}})

return selection.map(x=>x.states)

2 Likes