Editable Table with Visual Builder - Additional Tips

In a previous post I showed how to create editable tables in Visual Builder. This entry will cover two additional behaviors you might want to add to your tables - sending only changed records to the backend, and adding a single click option to edit a row.

Update Only Changed Rows

In the video I published on creating an editable table, I looped over every record in the table sending each to the backend to be saved. A better approach would be to only send changed records to the backend. In the video below I start from the previous app and add an array that will save the id of records that have changed.

Then we'll modify the "Save" action chain. For each row from the ADP that populates the table, I'll check whether the id of that row is in the list of changed rows. Only if it is included in that array we'll continue with sending an update event to the backend.

The bit of JavaScript I use for finding if the id value exist in the array is:

PageModule.prototype.findInArray = function(value,myarray){     return myarray.find(record => record.id === value);   }

One extra step to add is a reset the changedRows array to be empty after you finished the loop. This way you'll be ready for the next set of changes in the table. Note that in the video this assignment actually resulted in the wrong format - it should look like this:

Another possible improvement is to construct a batch REST call that will have multiple transactions submitted as one. More on using batch operations with Visual Builder business objects here.

One Click Edit

With the approach I showed in the previous video, the end user needs to double click to get the record into edit mode. Some customers asked if there is a way to do it with a single click instead, or to give better indication that rows are updateable. In the second part of the video I show how you can add an edit icon (or button or link) - that when clicked will turn the row into editable mode. This is done by setting the edit-row property of the table.

Here are both steps in a short video: