Populate Dropdown Text & Value From Query to Custom Component

App Building
, , ,
1

Recently I have this hard-coded data to be displayed in the dropdown menu option.

image
image481×587 32.9 KB

What I want here is not to hard-coded the data by myself but instead I want to populate it from the query using .map.

My query is like this:

image
image1207×286 32.5 KB

So basically I want to make 'id' as dropdown value and 'nombre' as dropdown text.

How to achieve this?

PS: It would be cool if I can also run the query based on what country user is selecting in my custom component. For example:

  • If user select "es" then it will run the query with id_pais = 1
  • If user select "it" then it will run the query with id_pais = 2
    and so on.

Update: I tried this way but not working:

{{formatDataAsArray(query12.data).map(
      { text: query12.data.id, value: query12.data.nombre}
)}}
2

Hi @yeftanma,

You can connect data sets directly to the selection component by switching the 'Options' property from Manual to Mapped. And then placing in code like this:

{{ MonetAlwaysDataDB.data }}

Retool will try to setup the correct data for Value and Label (especially if there are columns in your data like 'id'. However, you can update what is displayed pretty easily.

And for your section question you can connect the value of an input to a query pretty easily by doing something like this:

SELECT id, nombre FROM proveedor WHERE id_paias = {{ selectFieldInput.value }}

hth

3

I don't have 'Options' property since I am using custom component to create the dropdown itself. Do you have any other solution for that?

4

Oh, sorry missed that you were using a custom component. In custom components you can pass any data you want in the 'Model'

component

And then in your component you can have code like this:

<script type="text/babel">
  const DownloadAttachments = ({ triggerQuery, model, modelUpdate }) => (
    <div className="document-list">
...

Then you will have access to model...

https://docs.retool.com/docs/custom-components

5

Is it can be done only using React? What if I want it to pass data using classic HTML?

6

@yeftanma,

I believe the only way to access data in a custom component at this time, is to use React. Have you tried to use one of the existing Select fields? If so, what didn't work from those components?

7

Recently I have some dependent dropdown that will fetch value differently depending on another dropdown.

Other consideration why I don't use Retool Select component is basically because it is kinda hard to connect between my own backend platform and Retool itself.

8

@yeftanma,

Both of those cases are handled pretty well with the out of the box select. The one concept that you can think about is separate data from input. What I mean by that is, prepare your data outside of your component, using Query and JS Query. Once you have your data the way you want it -- bind it to your input.

So for example, lets say that you have selection list 'chooser' with values. And you wanted the selected value of that list to drive the available selections in a second list you can do something like this:

  1. Create Temporary State variable listOptions
  2. Create a JS Query that contains code that populates listOptions with a default value:
const allOptions = {
    group1: [{
        label: 'label a',
        value: 'value a'
    },
    group2: {
        label: 'label b',
        value: 'value b'
    } ...
    ]
}

listOptions.setValue(allOptions.group1)
  1. In the second list option you set the options to Mapped and the value to:
{{ listOptions.value }}
  1. Then if you want to link these two up you would simply change the code in you JS Query to set the value of listOptions to the selected value from the first select:
listOptions.setValue(allOptions[select1.value])

This is just an example. I was not sure how you were determining the options/values for select 1 and how those values related to select 2.

hth

9