Batch Editable Table (BDP) Recipe

Note: This demo does not use Redwood Design Patterns and is meant to show technical functionality rather than the best practices in UI design.

This recipe shows you how to implement an editable table using Buffering Data Provider with Service Data Provider where users can edit multiple existing rows or create new rows, before they submit all their changes in one transaction to the backend service. The recipe also demonstrates how to implement validation. It ensures, for example, that a change to an employee's salary remains within the minimum and maximum values for that employee's job classification.

Employees

First Name	Last Name	Job	Salary Range

Ellen	Abel	Sales Representative	$6000 - 12000
Sundar	Ande	Sales Representative	$6000 - 12000
Mozhe	Atkinson	Stock Clerk	$2008 - 5000
David	Austin	Programmer	$4000 - 10000
Hermann	Baer	Public Relations Representative	$4500 - 10500
Shelli	Baida	Purchasing Clerk	$2500 - 5500
Amit	Banda	Sales Representative	$6000 - 12000
Elizabeth	Bates	Sales Representative	$6000 - 12000
Sarah	Bell	Shipping Clerk	$2500 - 5500
David	Bernstein	Sales Representative	$6000 - 12000
Laura	Bissot	Stock Clerk	$2008 - 5000
Harrison	Bloom	Sales Representative	$6000 - 12000
Alexis	Bull	Shipping Clerk	$2500 - 5500
Anthony	Cabrio	Shipping Clerk	$2500 - 5500
Gerald	Cambrault	Sales Manager	$10000 - 20000
Nanette	Cambrault	Sales Representative	$6000 - 12000
John	Chen	Accountant	$4200 - 9000
Kelly	Chung	Shipping Clerk	$2500 - 5500
Karen	Colmenares	Purchasing Clerk	$2500 - 5500
Curtis	Davies	Stock Clerk	$2008 - 5000
Lex	De Haan	Administration Vice President	$15000 - 30000
Julia	Dellinger	Shipping Clerk	$2500 - 5500
Jennifer	Dilly	Shipping Clerk	$2500 - 5500
Louise	Doran	Sales Representative	$6000 - 12000
Bruce	Ernst	Programmer	$4000 - 10000
Alberto	Errazuriz	Sales Manager	$10000 - 20000
Britney	Everett	Shipping Clerk	$2500 - 5500
Daniel	Faviet	Accountant	$4200 - 9000
Pat	Fay	Marketing Representative	$4000 - 9000
Kevin	Feeney	Shipping Clerk	$2500 - 5500
Jean	Fleaur	Shipping Clerk	$2500 - 5500
Tayler	Fox	Sales Representative	$6000 - 12000
Adam	Fripp	Stock Manager	$5500 - 8500
Timothy	Gates	Shipping Clerk	$2500 - 5500
Ki	Gee	Stock Clerk	$2008 - 5000
Girard	Geoni	Shipping Clerk	$2500 - 5500
William	Gietz	Accountant	$4200 - 9000
Kimberely	Grant	Sales Representative	$6000 - 12000
Douglas	Grant	Shipping Clerk	$2500 - 5500
Nancy	Greenberg	Finance Manager	$8200 - 16000
Danielle	Greene	Sales Representative	$6000 - 12000
Peter	Hall	Sales Representative	$6000 - 12000
Michael	Hartstein	Marketing Manager	$9000 - 15000
Shelley	Higgins	Accounting Manager	$8200 - 16000
Guy	Himuro	Purchasing Clerk	$2500 - 5500
Alexander	Hunold	Programmer	$4000 - 10000
Alyssa	Hutton	Sales Representative	$6000 - 12000
Charles	Johnson	Sales Representative	$6000 - 12000
Vance	Jones	Shipping Clerk	$2500 - 5500
Payam	Kaufling	Stock Manager	$5500 - 8500
Alexander	Khoo	Purchasing Clerk	$2500 - 5500
Steven	King	President	$20080 - 40000
Janette	King	Sales Representative	$6000 - 12000
Neena	Kochhar	Administration Vice President	$15000 - 30000
Sundita	Kumar	Sales Representative	$6000 - 12000
Renske	Ladwig	Stock Clerk	$2008 - 5000
James	Landry	Stock Clerk	$2008 - 5000
David	Lee	Sales Representative	$6000 - 12000
Jack	Livingston	Sales Representative	$6000 - 12000
Diana	Lorentz	Programmer	$4000 - 10000
Jason	Mallin	Stock Clerk	$2008 - 5000
Steven	Markle	Stock Clerk	$2008 - 5000
James	Marlow	Stock Clerk	$2008 - 5000
Mattea	Marvins	Sales Representative	$6000 - 12000
Randall	Matos	Stock Clerk	$2008 - 5000
Susan	Mavris	Human Resources Representative	$4000 - 9000
Samuel	McCain	Shipping Clerk	$2500 - 5500
Allan	McEwen	Sales Representative	$6000 - 12000
Irene	Mikkilineni	Stock Clerk	$2008 - 5000
Kevin	Mourgos	Stock Manager	$5500 - 8500
Julia	Nayer	Stock Clerk	$2008 - 5000
Donald	OConnell	Shipping Clerk	$2500 - 5500
Christopher	Olsen	Sales Representative	$6000 - 12000
TJ	Olson	Stock Clerk	$2008 - 5000
Lisa	Ozer	Sales Representative	$6000 - 12000
Karen	Partners	Sales Manager	$10000 - 20000
Valli	Pataballa	Programmer	$4000 - 10000
Joshua	Patel	Stock Clerk	$2008 - 5000
Randall	Perkins	Shipping Clerk	$2500 - 5500
Hazel	Philtanker	Stock Clerk	$2008 - 5000
Luis	Popp	Accountant	$4200 - 9000
Trenna	Rajs	Stock Clerk	$2008 - 5000
Den	Raphaely	Purchasing Manager	$8000 - 15000
Michael	Rogers	Stock Clerk	$2008 - 5000
John	Russell	Sales Manager	$10000 - 20000
Nandita	Sarchand	Shipping Clerk	$2500 - 5500
Ismael	Sciarra	Accountant	$4200 - 9000
John	Seo	Stock Clerk	$2008 - 5000
Sarath	Sewall	Sales Representative	$6000 - 12000
Lindsey	Smith	Sales Representative	$6000 - 12000
William	Smith	Sales Representative	$6000 - 12000
Stephen	Stiles	Stock Clerk	$2008 - 5000
Martha	Sullivan	Shipping Clerk	$2500 - 5500
Patrick	Sully	Sales Representative	$6000 - 12000
Jonathon	Taylor	Sales Representative	$6000 - 12000
Winston	Taylor	Shipping Clerk	$2500 - 5500
Sigal	Tobias	Purchasing Clerk	$2500 - 5500
Peter	Tucker	Sales Representative	$6000 - 12000
Oliver	Tuvault	Sales Representative	$6000 - 12000
Jose Manuel	Urman	Accountant	$4200 - 9000
Peter	Vargas	Stock Clerk	$2008 - 5000
Clara	Vishney	Sales Representative	$6000 - 12000
Shanta	Vollman	Stock Manager	$5500 - 8500
Alana	Walsh	Shipping Clerk	$2500 - 5500
Matthew	Weiss	Stock Manager	$5500 - 8500
Jennifer	Whalen	Administration Assistant	$3000 - 6000
Eleni	Zlotkey	Sales Manager	$10000 - 20000

Select Row

Buffered Changes:

Recipe

Create a Table component that displays editable rows of employees. For changes to salary, you'll use a custom validator to ensure that the salary remains within a valid range. All changes are stored in a buffer until the user clicks Save, at which time a REST call posts the changes to the backend service.

Create a custom type from the GET /Employee endpoint. Add the appropriate fields (name, job, and so on) to the EmployeeType custom type.
Create a page variable named currentRowBuffer of type EmployeeType.
Add an ojBeforeRowEdit event listener to the Table component.
In the TableBeforeRowEditChain action chain, add an Assign Variables action (JSON chain version here) where you assign the current row data (rowData) to the currentRowBuffer page variable.
Add an ojBeforeRowEditEnd event listener to the Table component.

The generated TableBeforeRowEditEnd action chain needs two new parameters added to it as input params. In the Properties pane beside Parameters, click Add to create the following two parameters:
- currentRowBuffer of type EmployeeType
- event of type Any
To map these two new parameters, open the Event Listeners tab and select the TableBeforeRowEditEnd action chain under the tableBeforeRowEditEnd event. In the Properties pane, map the new parameters to $page.variables.currentRowBuffer and $event respectively.
In the TableBeforeRowEditEnd action chain, add an If action and test if cancelEdit parameter is false. If false, changes need to be stored into employeesBDP. Storing changes is implemented using a Call Variable action for variable employeesBDP and function updateItem with parameters:
```
{ metadata: { key: rowKey}, data: currentRowBuffer}
```
Important: Both the ojBeforeRowEdit and ojBeforeRowEditEnd events must have asynchronous behaviour enabled for the editable Table component to work. Locate tableBeforeRowEdit event under Event Listeners and enable Async Handling option in properties. Do the same for tableBeforeRowEditEnd event. The final JSON code should look like this:
```
  "eventListeners": {
    "tableBeforeRowEdit": {
      "asyncBehavior": "enabled",
      "chains": [{ ... }]
    },
    "tableBeforeRowEditEnd": {
      "asyncBehavior": "enabled",
      "chains": [{ ... }]
    }
          
```
In the Table component's Properties pane, set the edit-mode property to rowEdit.
Each table cell needs to be enhanced to make it editable:
- Drag and drop an oj-bind-text component onto the first table column which needs to be editable. This generates a cell template for the column.
- In the Structure view of the page, right click the oj-bind-text node and select Surround and If from the context menu to generate a condition for when to render the text component. Set the condition for the oj-bind-if to [[$current.mode === 'navigation']]. When table row is in navigation read-only mode, the text component renders the column value.
- Drop an oj-input-text component or any required component into the same cell next to the oj-bind-if condition, and wrap it again in an If condition, but this time set the condition to [[ $current.mode === 'edit']] to show an editable input text component when the table row is in edit mode.
- Remove label-hint and readonly properties from the input text component and bind the value property to the corresponding property from currentRowBuffer. For example, {{ $variables.currentRowBuffer.firstName }}.

Use similar steps to make the other table columns editable. The Table component is now editable, and when run changes are stored in an instance of the buffering data provider. An example of what the finished table cell templates might look like follows:

        <template slot="Last Name">
          <oj-bind-if test='[[$current.mode === "navigation"]]'>
            <oj-bind-text value="[[$current.data]]"></oj-bind-text>
          </oj-bind-if>
          <oj-bind-if test='[[$current.mode === "edit"]]'>
            <oj-input-text class="editable" value="{{ $variables.currentRowBuffer.lastName}}"
              :id="[['oj-input-text-1829646926-3-' + $current.key]]" required="true"></oj-input-text>
          </oj-bind-if>
        </template>

        <template slot="Job">
          <oj-bind-if test='[[$current.mode === "navigation"]]'>
            <oj-bind-text value="[[ $current.data.items[0] !== undefined ? $current.data.items[0].jobTitle : '' ]]">
            </oj-bind-text>
          </oj-bind-if>
          <oj-bind-if test='[[$current.mode === "edit"]]'>
            <oj-select-single data="[[$page.variables.jobListSDP]]" value="{{ $page.variables.currentRowBuffer.job }}"
              value-item="{{ { key: $page.variables.currentRowBuffer.job, data: { id: $page.variables.currentRowBuffer.job, jobTitle: $page.variables.currentRowBuffer.jobObject.items[0].jobTitle }} }}"
              :id="[[ 'oj_select_single_'+$current.key ]]" on-value-changed="[[$listeners.ojSelectSingleValue]]"
              item-text="jobTitle">
            </oj-select-single>
          </oj-bind-if>
        </template>

        <template slot="Salary Range">
          <oj-bind-if test='[[$current.mode === "navigation"]]'>
            <oj-bind-text value="[[ $page.functions.getFormattedSalaryRange($current.row, false) ]]"></oj-bind-text>
          </oj-bind-if>
          <oj-bind-if test='[[$current.mode === "edit"]]'>
            <oj-bind-text
              value="[[ $page.functions.getFormattedSalaryRange($page.variables.currentRowBuffer, $page.variables.disableRowEditExit) ]]">
            </oj-bind-text>
          </oj-bind-if>
        </template>

        <template slot="Salary">
          <oj-bind-if test='[[$current.mode === "navigation"]]'>
            <oj-input-text
              converter='{"options":{"style":"currency","currency":"USD","useGrouping":true},"type":"number"}'
              value='[[typeof $current.data === "number" ? $current.data : null]]'
              :id="[['oj-input-number-1829646926-1-' + $current.key]]" readonly="true"></oj-input-text>
          </oj-bind-if>
          <oj-bind-if test='[[$current.mode === "edit"]]'>
            <oj-input-text class="editable"
              validators="{{[$functions.salaryInRangeValidator($page.variables.currentRowBuffer, $page.variables.disableRowEditExit)]}}"
              converter='{"options":{"style":"currency","currency":"USD","useGrouping":true},"type":"number"}'
              value="{{ $variables.currentRowBuffer.salary}}"
              :id="[['oj-input-number-1829646926-1-' + $current.key]]"></oj-input-text>
          </oj-bind-if>
        </template>

Validation ensures that row changes are submitted only when changed row data is valid. For example, each employee entry must have a first and last name, and changes to an employee's salary must remain within the range for the employee's paygrade.

Add an class="editable" attribute to all the editable components that need to be validated in the editable table row cell templates.

Write a custom function in the page's PageModule class called isFormValid to validate all components with the editable value for the class attribute:

In the TableBeforeRowEditEndChain action chain, add an If action to the start of the action chain to execute existing logic when $page.functions.isFormValid(event). That is, changes should only be saved when row data are valid.
When row data are invalid it is important to prevent a user from leaving the table row. To keep a table row in edit mode regardless of where user clicks until the user enters valid data, set the Prevent Default property to false on the TableBeforeRowEditEnd event listener. In the Event Listeners tab, select the tableBeforeRowEditEnd event (and not the action chain for that event) and, in the Properties pane, set the Prevent Default condition to [[!$functions.isFormValid($event)]].

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.

Drag a Button component and drop it above the Table component. Name it Save.
In the Events tab of the Properties pane for the Save button, add a Quick Start: 'ojAction' event and a corresponding action chain named SubmitChanges.

In the SubmitChanges JavaScript action chain, multiple supporting functions need to be added to the SubmitChanges action chain. The setStatusTo function sets Buffering Data Provider items to submitting, submitted, or unsubmitted states. The createBatchPayload function generates the payload with all changes.

    /**
     * @param {Object} context
     */
    async createBatchPayload(context) {
      const { $page, $flow, $application } = context;
    
      const generateBatchSnippet = function(url, payload, operation, id) {
        return {
          id: id ? id : "someID",
          path: url,
          operation: operation,
          payload: payload ? payload : {},
        };
      };

      let payloads = [];
      let uniqueId = new Date().getTime();
      let editItems = $page.variables.employeesBDP.instance.getSubmittableItems();

      editItems.forEach((editItem) => {
        let change = editItem.operation;
        let key = editItem.item.data.id;
        // clone record - some properties will be deleted from the clone:
        let record = JSON.parse(JSON.stringify(editItem.item.data));
        if (change === "remove") {
          payloads.push(
            generateBatchSnippet("/Employee/" + key, {}, "delete")
          );
        } else if (change === "add") {
          delete record.departmentObject;
          delete record.jobObject;
          delete record.id;
          // default some required fields:
          uniqueId = ++uniqueId;
          record.email = "person" + uniqueId + "@company.com";
          record.hireDate = new Date();
          record.department = 1;
          payloads.push(
            generateBatchSnippet("/Employee", record, "create")
          );
        } else if (change === "update") {
          delete record.departmentObject;
          delete record.jobObject;
          payloads.push(
            generateBatchSnippet(
              "/Employee/" + key,
              record,
              "update"
            )
          );
        }
      });
      return {
        parts: payloads,
      };
    }

    /**
     * @param {Object} context
     */
    async setStatusTo(context, status) {
      const { $page, $flow, $application } = context;
    
      let editItems = $page.variables.employeesBDP.instance.getSubmittableItems();
      editItems.forEach((editItem) => {
        $page.variables.employeesBDP.instance.setItemStatus(editItem, status);
      });
      return editItems;
    }

Using these functions, state can be changed, and data saved while error states can be handled as seen in this code example:

The recommended way to add a new record is described in the Table Add Row recipe. The solution presented here is an alternative approach to insert a new blank row, and make it editable.

All records in the Table component must have a unique key value.

For a newly-inserted record, which does not yet have a unique ID assigned by a backend database, we need to generate a unique value. In its simplest form, it can be a new page variable, named nextIdValue with a default value that starts with a high number that guarantees uniqueness when used in combination with existing records. This is the approach that this recipe follows. If you haven't yet, add the nextIdValue variable now.
Add two new page variables, scrollPosition and editRow both of type Any.
In the Properties pane, change the Table component to use these variables from the scroll-position="{{ $page.variables.scrollPosition }}" and edit-row="{{ $page.variables.editRow }}" properties. This allows us to programatically scroll the table to a row, and to initiate row editing.
Drag a Button component and drop it above the Table component. Name it Insert Row.
In the Events tab of the Properties pane for the Button component, add a Quick Start: 'ojAction' event and a corresponding action chain named InsertRow.

In the InsertRow action chain, we add actions to increase the value of nextIdValue, create a blank record with default values, insert the row into employeesBDP using the addItem function call, scroll to the position of the newly-inserted row, and make the row editable. The code for these actions is similar to the following:

Employees

Recipe

Feedback

Download batch-editable-table-bdp Recipe

Visual Builder Cookbook Help