I am creating a list-view component with fields that take data from a REST api call:
listView: [
container: {
select: {
value: "source-key",
},
multiselect: {
datasource: rest_api_call
}
},
...
]
my api is setup in a way that I need to reference select.value
in rest_api_call
for each item in listView
. I tried defining my REST call url as something like:
.../path/to/resource/listViewState[i].select.value
unfortunately, [i]
is not available in the REST call scope. Is there a way to achieve that?
By creating a list-view component do you mean using an existing List View Component or creating a custom component yourself?
If you have to trigger an API call multiple times, maybe this will help? Run JavaScript | Retool Docs
I am using the retool List View component.
your suggestion fulfils half of what I need to happen. How then would I use the return data from each api call to populate the datasource for the multiselect
field?
If you're looping to execute a number of calls, the result of each api call could be put into a variable, and then your multiselect field will simply load the contents of that variable, which would be an array of objects or whatever your data is.
@27shutterclicks thanks!! that was the way to go!
I was having issues because in my api call trigger my additionalScope
was being overwritten by another unrelated component so my results were not being stored in the auxiliary state.
for the sake of anyone looking into something similar, here is a run down:
I am building a query builder sort of component with nested ListViews:
some data formatting constraints and query formatting downstream prevent me from using the builtin retool query-builder component.
When filling these filters, users have to select from a set of values that are stored from a upstream procedure. They select object
and property
and based on that, the available options for values
should change. Arrows indicate dependency.
on the code in retool I have the following:

query
is an auxiliary variable that stores the current query to control the structure and length of listviews;
apiCallStore
is an auxiliary variable that stores the result of my_api_call
that I trigger by script, when property
or object
changes
// my_api_call_trigger query
my_api_call.trigger({
additionalScope: {
propName: queryBuilder.data.outerList[ri[0]].innerList[i].property
},
onSuccess: data => {
apiCallStore.setIn([ri[0], i], data)
},
});
my_api_call
calls an internal api:
.../path/to/{{object.value}}/with/{{propName}}/values
I then provide the apiCallStore.value[ri[0]][i]
as datastore to the Values
select:

1 Like