Create an Editable Table
You can create an editable table that allows users to edit multiple existing rows before they submit all their changes in one transaction to the backend service.
This implementation of an editable table uses the Buffering Data Provider with a Service Data Provider (SDP). The Buffering Data Provider is a wrapper that provides buffering for an underlying data provider, so that edits can be committed to the data source later on. The underlying data provider (Service Data Provider, in this case) is responsible for fetching data, and the Buffering Data Provider merges any buffered edits with the underlying data so they appear as a unified set of data.
Here's how you can create a table that displays editable rows of employees. All changes are stored in a buffer until the user clicks a Save button, at which time a REST call posts the changes to the backend service. The example used here follows the Batch Editable Table (BDP) recipe in the Visual Builder Cookbook, which demonstrates additional functionality, such as how to implement validation and create new rows.
- Add a table to your page and connect it to data using the Add Data quick start. The quick start creates a variable that is automatically bound to the table component. Because this variable is based on the Service Data Provider type, you need to create a variable based on the Buffering Data Provider type and set up your table to reference the new variable.
- Drag and drop a table component to your page, then add data to it using the Add Data quick start.
- Create a variable (for example,
employeesBDP
) based on the Buffering Data Provider type. In the newly created variable's Properties pane, map thedataProvider
Constructor Parameter to theemployeeListSDP
: - In the table's Data tab, change the
data
property to point to[[ $variables.employeesBDP.instance ]]
, instead ofemployeesListSDP
.
- Create event listeners and action chains to handle the table's edit events and make the table editable.
- Track and save changes to the table. Saving changes involves collecting them from the Buffering Data Provider instance, marking changes as being submitted, creating a single batch REST Call payload to store all changes in one transaction, and finally marking changed items in the Buffering Data Provider as submitted.