Thank you for sharing your thoughts here. The solution is very useful.
In my use case, there's still one thing I couldn't figure out and would like to ask for your advice. The listview needs to be reset (back to 1 row with empty input) whenever the user opens the modal with the listview. I tried to create a javascript to set all the temp states to the initial values and retrigger the refillForm.
Though the listview row is back to only one row, the value entered in the name input is not cleared. Not sure how to fix the problem.
Please let me know if you have any thoughts on this. Thank you.
Thank you so much for the reply. I just tried the method. The actual result is: the row number on the listview turns back to one. The tempData returns to {"rows":[{"name":null}]}. But the value in the first row's textInput still stays even if I manually trigger refillForm.
Hi David,
I have a select component and a textInput component per row. The refillForm script is here.
for (let i = 0; i < Object.keys(tempData.value.rows).length; i++) {
// create a setValue statement for each nested component you need to fill
select1[i].setValue(tempData.value.rows[i].type);
textInput1[i].setValue(tempData.value.rows[i].note);
};
Then I think the value you're setting tempData to is incorrect. You'll need to include the keys of the values you're trying to set in refillForm, something like:
Or, if you find that the value is not set properly before refillForm.trigger(), I think you can try the async method I suggested above, with the updated value in tempData.setValue(...):
Sorry I didn't explain things clearly before. I used the {row:[ {"name":null}]} just to align with the original post discussion. The real codes I'm using is the same as you suggested. I have used the codes with or without await in a new javascript to clear out the inputs in the listView but it didn't work out.
I think you mentioned that the listView is also nested within a Modal, is that right? Does the listView refill properly if you take it out of the modal?
Go to the Advanced Options and check the box that says "Keep variable references inside the query in sync with your app" (see screenshot for an example).
I'm still not sure if this will solve your problem, but I saw the option and think it's worth a shot!
Checking "Keep variable references inside the query in sync with your app" doesn't work for me. But I got some inspiration from your javascript scripts and figured out a way to reset the listview components.
Just want to say thank you again for providing so much help along the way.
It's great to see everyone chipping in to help solve this!
If the above solution has not worked for you, here's another workaround I've come up with that may help. It basically has the "Remove" button perform 2 Event Handlers:
Decrement the number from your temporary state that fills your ListView> Number of Rows
Make a copy of your ListView data. Use the JS method splice() and removes the data from your current textInputs using the specific ListView index(aka: "your row"), and set the value of the temporary state holding your existing data that no longer contains the deleted row.
Hey all - think I came up with another (pretty similar to Kenny's) solution for this and wanted to drop it in:
In your initial query that is used as a source for the list view, say getData, with an event handler, set a temporary state state1 to getData.data (My data is a JSON that has an array inside of it I use for the listView)
Use state1 as the reference point for all elements within your listView, using i as normal.
Add another JS query removeElementOfListView, with the following code:
Create a "Remove" button in the listView and set to trigger removeElementOfListView
This seems to be working fine for me so far, but if you have changes in another element of the list, you will probably have to write those changes to state1 as they happen or they get reset when you remove a different element. (Haven't done that yet).
That's a good question @Doglas file inputs are tricky because when they reset when they re-render (i.e. with any change to the listview's underlying state).
If you'll be dealing with a relatively small number of items, you can try fixing the listview's length to be the maximum number of items that could be in the listview:
Then, you could still use a temp state to define the rows as normal but instead of deleting a row you could set its value to be null:
And then nest your components in a container that you conditionally hide based on whether there's any data present for that row with something like {{!dataSource.value[i]}}:
That limits the amount of interaction anyone can have with the listview before needing to "reset" it so it's far from an ideal workaround but it may work if usage is limited enough and you could reset in on submission or so:
Curious to know what you think and maybe get more information about your use case! hide_listview_items.json
file inputs are tricky because when they reset when they re-render (i.e. with any change to the listview's underlying state).
but it may work if usage is limited enough and you could reset in on submission or so: