Hi,
I am a retool newbie.
I have two Select components, say, select1, select2
I set select1 to have values and labels to be ['car', 'bird']
I need select2 to dynamically populate to:
How can I do this?
Thanks for any responses!
Hi there @floyd,
Welcome to the forum!
There are many ways of achieving this, and I think one major factor is how your data is structured and being queried.
In any case, the way I would approach it is by adding a filter to the data source used in the select 2 component, something like {{myquery.data.filter (x =>x.category === select1.value}}}
This means that myquery contains all of your data, whether they are cars or birds. If that is simply not possible, then it gets more complex, and you would have different options, use a terniary to decide which data source is being used, or simply have 2 select components that hide/show depending on the category selected on select1.
Hope that makes sense, if it doesn't, please do share more around your data structure and queries.
Thanks Miguel. Good point about filtering the data. But, I think I have a more basic problem -for the Mobile version, the data source for Select component does not seem to accept a query data source, or even some javascript. I tried both, but it shows errors. It seems to want only an array. Of course I maybe doing this all wrong.
The other thing I tried was the change the event handler of the Select1 to set the values and labels in Select2 using 'Control Component', 'Run script' options but that didnt work either...the Control Component only allows to change the value, i.e setValue method; not the entire array of values or the labels
Hello @floyd!
What error where you getting when trying to set the select component to be the results of a query?
You are correct, the component will want a data structure that it can iterate over, such as an array.
Make you that you get into the right level for the data you want to access, ex: query1.data.names you can view the response of your query by previewing/running it, as well as in the state.
You should then be able to have the second select have in it's Value field either a ternary {{ select1.value === 'cars' ? queryCars : queryBirds}} or run a Javascript code block with an if/else statement where you grab the value you want to compare from the first select component.
For using control component, you are correct you can use the setValue method to set the data structure for the component to iterate over such as select2.setValue(query2.data.name) as an alternative inside a ternary or if block in a Control Component run script.
Hope this helps!
