I couldn't understand this tutorial at all.
1 Like
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.
1 Like
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)
1 Like
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.
Thank You!!!!!!!! so much for the reply sir, will check it out and try.
Hi @Kabirdas Sir , sorry if i didn't put my question in a right way or not, the JSON for displayLablel is working fine as you said if only we have JSON template.
But what i want is that to read the both innerArrayValues and outerArrayValues together from nested listView and store them in a temporary State from UI iteself.
suppose i have two listViews nested like
[listView1
some data
[listView2]//some innerData
]
like listView1.data.listView2// which is giving undefined!
now i want to fetch both innerData and outerData of that nestedListView from UI and store them in temporary State. And if i were to consider them as an single row, i am trying implement addition and deletion of a row which should not affect or clear the values of other row that i might add from listView1 or that I might add a row inside of list view 2.
its like I want to pass a JSON structure
stepsArray": [
{
"step": "string",
"isFirstStep": true,
"inputType": "",
"documentCollectionType": "",
"downloadDocumentId": "string",
"displayLabelLocaleMap": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
},
"instructionTextLocaleMap": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
},
"instructionHeaderLocaleMap": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
},
"dropdownPlaceHolder": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
},
"optionsArray": [
{
"documentArray": [
"string"
],
"id": "string",
"documentType": "string",
"subArray": [
{
"type": "",
"displayLabelLocaleMap": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
}
}
],
"country": "string",
"region": "string",
"region2": "string",
"displayLabelLocaleMap": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
},
"nextStep": "string",
"optionValue": "string",
"point": 0
}
],
"nextStep": "string",
"repeatable": true,
"isSkip": true
}
]
from the UI itself.
Please tell me how that works. I want an UI to create a form where user can give these data on his own by giving number of objects as he wants or delete.
I thought nestedList View in best solution as i am new to retool i am getting quite confused.
Sorry for the very long question!!!!!!
Ahh, I see! Have you tried wrapping the listview in a form and using form.data to access the nested data?
Hi @Kabirdas Sir, I tried the method of retrieving the nested data from the form.data and its working!, but whenever i am adding a new row for the nested listView the firstRow data is clearing out.
I am in scenario where i have three listView which is nested together. And i want to perform this add and delete row functionality for each nested list view.
something like I have an array Data
{
[Array1//some data
innerArray1//somedata[
innerArray2//someData
]
]
} as a row1
whenever i add add other row with same data within nested listview it shouldn't affect first row data or reset the first row data. And while creating within the form as you can see the JSONpayload that i have sent previously their are certain keys have been repeated/duplicated while in the form i am not able create components with same Key name. Just in case if we have any solution for that?
Thanks In advance!
Mm... I hadn't checked for that! What if you try adding a script to your button that takes a snapshot of the form data and then restores it after adding a new row? Using the json you posted above as an example, it might look something like this:
const data = form1.data;
listView2RowValues.setValue(listView2RowValues.value + 1);
form1.setData(data);
What do you think?
listview_responseive_persistent_form_data.json
Hi @Kabirdas sir, Thank you for the solution that you gave which helped in not clearing out the data. while its working for the first nested data but not working for the inner array. and another issue is that whenever i am adding or making any changes for the innerListView Data for the first row it is repliating for second row as well. I just wanted to know is it feasible to use listView component for dynamic input data based on the user requirements? or is their any other solution that i could use in listView itself rather than custum UI.
Thanks In advance!
yea, looking at the app again it looks as though the delete buttons are always deleting the last row instead of the one they're attached to as well. I think one possible way to manage this is to store all of your data in a temp state and then have your listview be generated from that state, e.g.:
You can then have your inputs make changes directly to the tempstate to cache their values:
Add rows by modifying the state:
And also delete rows by modifying the state:
It's a pretty complex setup though, I've attached a JSON of what it looks like but it definitely needs some combing through.
Dynamic listview forms are definitely tricky! Another user posted here with a similar question and I'm not sure I have the best answer - definitely curious to hear what others have to say!