ListView / Modify Values and save

[whynot]

Here is how i solved it, it may be valuable for others as well facing same requirements

Assume we have a simple table like this:

We want to display the items in a listview component and make the content of column "new_text" editable.

Then here is step-by-step guide:

1. Create query1 with select id, new_text from table_data.
   

   

2. Create new variable, name it variable2 (or whatever you like) and set initial value to {{ query1.data }}
   

   

3. Create a ListView Component, as DataSource set the variable2, primary key should be the unique id field of a table

4. I have added a JSONExplorer component to see the live state of variable2. Without changes made to the input field (i called it new_text), the JSON looks like this.

5. This is how my repeatable "new_text" input field is configured:
   

   

6. Now we need to pay attention to the event handlers, add a "change" event like this:
   6.1. key path: we add a new array of objects called "changeSet" and add the changes at position "i"
   

   
   
   6.2. Value: id is the table name field (important because later this needs to be mapped when doing the bulk update. new_text.id resolves to "new_text" and new_text.value resolves to the changed value of that text_input field.
   For example i added a "2" to "finally"

7. in the variable2 object, there is now a new object called "changeSet"

8. Now we can use this object to pass it to an bulk-update statement to change values in our table like so:

Now you could link the update to a Button and it would update the values in the table only if that button is being pressed.

EDIT: If typing the values fast in the input fields, there is a lag-behind issue. I think in need to solve it by firing the "set value" handler only, if typing is finished or the input field is not in focus anymore.

EDIT2: Solved it by setting event handler event to "Blur" instead of "Change". Now the value can be edited and be saved to the changeSet only after leaving the input field.

I hope that helps, have a good start to the new year everyone!