Support for Nested ListViews

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!

:thinking: 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.
Apr-12-2023 16-09-35

listview_nesting_example.json

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!