I've read the guide on working with ListViews and it's working great for a single list. However right away we had a need for nested lists. The way array indexing currently works is the variable i is magically available inside a ListView. This breaks in a nested ListView where you would need another variable to index the inner list (j by convention).
Is there a workaround? And if not, can this be escalated to a feature request?
Hi, I am also looking for this functionality. This old forum: Improving the list view component
indicates that they had no plans to implement, but I would really appreciate this feature!
This is still the case unfortunately, supporting nested listviews is a non-trivial change to implement without potentially breaking some existing apps. We do plan on releasing a new and improved versions of many components (just rolled out a Text v2), while depreciating creation of the old versions. I'm not sure when we'll be moving on to the listview in that project but there are a few other components we'll be going over before then. Until then, I'll move this over to a feature request
We just got hit by the nesting listview limitation. Any idea about a workaround?
I am also interested in nested list views.
Hey folks! We are actively working on allowing List Views to be nested. This will likely start rolling out sometime next month.
Any update on this? I don't see any nested option.
You can do this now. It does have some performance problems which I have reported.
https://docs.retool.com/docs/create-custom-list-views#nested-list-views
I couldn't understand this tutorial at all.
You mean the part about all of the ri an i and where they go and such? Yeah, I feel you! Took some trial and error for me to get it.
Take this example (forgive the ugliness - a never completed app with test data):
The Text component is populated like this: {{qryJobsSelect_JSON.data[i].job_name}}
The Text component in the nested ListView looks like this:
{{qryJobsSelect_JSON.data[ri[0]].tasks[i].task_name}}
Where my data looks like this:
"project_name": "QB Tutorials",
"project_type": "Video Caption",
"project_id": 19,
"job_id": 69,
"job_name": "Caption Screen Recording 2022-03-01 at 8.02.26 AM.mov",
"job_due": null,
"job_start": null,
"job_end": null,
"job_location": null,
"tasks": [{
"job_id": 69,
"task_id": 145,
"task_name": "Caption Video",
"task_start": null,
"task_end": null,
"notes": null,
"contractor_id": null,
"contractor_name": null,
"location": null,
"task_type_id": 3,
"task_type": "Transcribe Video",
"caption_tools_id": "vB3vRxTj8",
"on_job_board": null
}, {
"job_id": 69,
"task_id": 146,
"task_name": "Post Video Caption Processing",
"task_start": null,
"task_end": null,
"notes": null,
"contractor_id": null,
"contractor_name": null,
"location": null,
"task_type_id": 4,
"task_type": "Post Video Transcription Processing",
"caption_tools_id": null,
"on_job_board": null
}]
}]
Hopefully dissecting this example gives you some clues for your application.can you do conditional rows? Ex. Trying to do a communication view where incoming is on left side, outgoing is on the ride side.
Use two JSON SQL queries to filter out the Incoming and Outgoing from your data and use those queries as the source for your ListViews.
yeah I have that, but would I need two separate list views, or is there someway to use conditional logic to have them display in a single list view?
To do the two list views you have two JSON SQL queries, one is for Incoming and it the source of your Incoming ListView and another query and ListView for Outgoing.
You could do one ListView and simply indicate if it is Incoming or Outgoing, maybe display in different colors to help your user differentiate.
If I am not duplicating you correctly and thus sending you irrelevant advice, go ahead and share a screen cap - a picture and thousand words and all that.
Hi sir,
I have a json like this
valueOptions": [
{
"displayLabelLocaleMap": {
"inputKey": "inputText",
"inputKey1": "inputText2"
},
"value": "inputValue1"
},
{
"displayLabelLocaleMap": {
"inputKey1": "inputValue1",
"inputKey2": "inputValue2",
"inputKey3":"inputValue2"
},
"value": "inputValue1"
]
i am trying to implement this using nested List View but unable to come up with a solution where the data of nested List view is reflecting in other list array as i am using temporary state to store the outer list Data.
can you suggest me what i can do to make them work where the inputFields are unique which was given by the user.
Please do the needful Thanks!
Hey @aruna_21!
Nested list views are built to work with nested arrays specifically, it looks as though each entry in valueOptions contains a non-iterable object so you may need to do some data conversion. You might try something like:
exampleData.data.valueOptions.map(option => {
option.displayLabelLocaleMap = Object.entries(option.displayLabelLocaleMap);
return option;
})
Which should turn your data into something like the following, letting you map over displayLabelLocalMap as well as the value options.
[
{
displayLabelLocaleMap: [
["inputKey", "inputText"],
["inputKey1", "inputText2"],
],
value: "inputValue1",
},
{
displayLabelLocaleMap: [
["inputKey1", "inputValue1"],
["inputKey2", "inputValue2"],
["inputKey3", "inputValue2"],
],
value: "inputValue1",
},
]
Curious to know if that's what you're going for or if I've missed the mark here 
I've included an app JSON of the above that you can import and play around with as well:
listview_nesting_example (1).json (14.0 KB)
Thanks a lot!!!!!!!!!!!! sir, will definitely try this out.
You are my savior!.
Hi sir , Regarding above query what I want to achieve is something dynamic mapping whenever the user gives inputValues as key value and map those values to the json object after converting them from array. something like i am doing for displayLable in the below demo.
Please check and do the needfull help as i am unable to come up with the solution from your suggestion as the array mapping and functions are different.
Or I would like to know if their is any other possible UI where i could simply use to come up with a better solution.
Thanks In advance!
ListViewResponsive (3).json (29.4 KB)
Hey @aruna_21!
Have you played around with the setIn method on your temp state? It allows you to specify a key path via an array that can let you access the specific part of the JSON you'd like to append, something like:
Thanks for this! for a second I thought I was going to have to restructure.
