Creating editable tables is a common practice among our customers. While tables might not be an ideal editing experience, some end users still prefer them – especially when modifying multiple records in one go. (Other approaches for editing include popup and drawer approach). To provide an easier way to work with sets of changed records we added support for a new data type called Buffering Data Provider (BDP for short) to the latest versions of Visual Builder.

BDP are based on data from another data provider – in most cases SDP (Service Data Provider) – and keeps track of the records that changed. You can then easily process the set of changed records in your preferred approach. One advantage of basing BDP on SDP rather than using ADP directly is that you get to leverage the built-in pagination SDP provides.

The Visual Builder Cookbook has a comprehensive downloadable example of using BDP for editable table – I would recommend you examine it for more tips and techniques. In this blog we'll focus on the initial steps you need to take to create the editable table based on BDP.

The high-level steps are

  • Create a regular table
  • Add input components to fields
  • Condition the displayed component based on the row status
  • Create variable to store updated row data and assign to components
  • Switch the table to be based on BDP
  • Add events for start and end of row editing
  • Add a button and event to handle saving the changes to the backend

Update Nov 2024 – you could now consider leveraging the new asynchronous events support offered by JET and VB – to eliminate flashing in the table when leaving a row.

Additional things you should consider adding include:

  • Using batch processing of changes in a single network transaction
  • Delete and insert operations and handle those in your save action (Here is a video for adding the delete operation)
  • Field and record data validation

All of those are implemented in the cookbook example – so check out the steps and code they provide.

Resources from the demo:

Code in the end edit event to update BDP:

 const callVariableMethodPageVariablesEmpBDPUpdateItemResult = await $page.variables.empBDP.instance.updateItem({ metadata:{key:rowKey,},data:changedRow,});

HTML for the table: