What's the best way to get dynamic listview rows? I want a rowNum+1 every time a button on the preceding row is clicked.
Update: Found a solution where a button on the preceding row triggers a JS that returns a listview.instances+=1.
If anyone has a more dynamic/flexible solution would appreciate it.
Hi @untethered!
You can use temporary state to manage a variable length for your list view. Open up the Left Sidebar, and under TEMPORARY STATE select "Create a variable to store data." Name it something like "listviewLength", then set it to a default value (e.g., 3).
On data load, you can update the value inside of a javascript query (e.g.
listviewLength.setValue(myData.length) ).Inside your ListView component, you can set the number of rows to be equal to
{{ listviewLength.value }}.Finally, you can add an "Add Row" button and a "Remove Row" button with on-click handlers to modify the
listviewLength.Here is some documentation that goes deeper into working with temporary state: https://docs.retool.com/docs/temporary-state
Let me know if that helps!
Grace
Thank you Grace, I wasn't fully aware of this temporary state feature. For now I hardcoded the rows but I'll try to implement this if num of rows users needs is always variable.
Hi,
FYI, even while the list view length is set to a temporary state the listView component doesn't sync with the value.
So, I was getting the following error "listViewSubfield[i].setValue is not a function".
I was able to sort it out by putting the set value functions in a separate query and passing the value to be set as an additional scope. It now works fine.
Maybe there should be something like the checkbox "Update variables with current state..." for components?
2 Likes