Remove specific index element from listView

Queries and Resources
21

Hi @david.mays,

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.

22

I would be very interest in hearing what your solution was. Iā€™m running into the same problem! :blush:

23

This is a fantastic solution! Thank you!

24

It's great to see everyone chipping in to help solve this! :star_struck:

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.

Exported app:
delete_specific_listview_row.json (8.7 KB)

2 Likes
25

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:
state1.value.line_items.splice(i,1)
state1.setValue(state1.value)
  • 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).

26

Seems to be working well for me! Thank you.

27

Hi @Kenny

What about file inputs, they don't have setValue method... Any approach for this case?

28

That's a good question @Doglas :thinking: 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 :disappointed: 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