Shay Shmeltzer's Oracle Development Tools Tips

Editable Tables in Visual Builder - The Oracle JET 8.1 Approach

Shay Shmeltzer
Director of Product Management - Oracle

Last year I wrote a blog about how to create editable tables based on version 6 of JET. That entry has been quite popular, but since the publishing of that blog things have changed in both Oracle JET and Oracle Visual Builder, and there is a new pattern we are now recommending for handling editable tables. The new pattern is offering better performance and eliminates some refresh issues that users encountered with the old approach. Below you can see a demo showing how to build an editable table in VB from scratch following the approach shown in the JET 8.1 cookbook sample.

Note - In general our UI expert are not in favor of editable tables, especially if your users would end up using their application on a mobile device with touch gesture. A better UI pattern they would recommend is editing in a pop-up or in a form next to the table. Here is a blog about editing from a pop-up - which is also simpler to implement :-) .

A few points about the solution:

The table should only show input component for the row you are currently editing. This is mainly for performance reasons. Rendering multiple lines with input components in them is a heavy task for the browser, and using just one line for editing reduces the time and memory needed to accomplish page rendering.

The table is based on an ArrayDataProvider - a variable that keeps an array of the records being edited on the client - allowing you to modify them over time (unlike ServiceDataProvider). Note that in the new March version of Visual Builder (19.4.3) we updated the ADP implementation so in the source you'll see this as "type": "vb/ArrayDataProvider2".

The actual editing is done on an object that replicates the current row being edited - this way when you change values we don't need to refresh the full array on each field change. Once you are done with the editing of the row, we update the array of records modifying just the row that you changed. We leverage two events on the table to catch the beginning and end of the row editing process.

The demo shows one approach to saving the data to the backend - sending a REST call to the backend to update each of the rows from the array. This of course is not the recommended approach - since you can be much more efficient sending just the rows that changes, and batching those transactions into a single REST request. I'm planning to have another blog entry showing this approach in the future [Update - the blog about this is here]. Another approach you could take is to send an updated row to the backend immediately as you leave the editing mode. This is assuming your use case is ok with this immediate commit without an additional operation by the user (such as clicking a save button).

Here is the full process end to end:

If you are looking to skip some parts then the flow is with time stamps so you can fast forward to the parts you need:

  • Define an ADP and populate it with data (0:50-3:30)
  • Define a table component and hook it up to the ADP (3:30-4:15)
  • Switch the table to use column templates for read/write status (4:15-9:05)
  • Create a row object and hook it up to the input components (9:05-10:00)
  • Add methods for populating and reading from the row object (10:00-13:30)
  • Add an event to loop over rows and save to the database (13:50-16:10)
  • Set columns width to eliminate column flashing (16:10-end)

Wait There is More...

If you found this video useful, you should also look at these two follow ups that cover additional tips:


Join the discussion

Comments ( 5 )
  • Doug Fowler Tuesday, April 14, 2020
    Thank you, this was awesome to see you walk through easy to follow steps to see this process. Please continue your great education.
  • Niek Kabel Monday, April 20, 2020
    In your old approach you used a row renderer where I could also change the background color of the entire row (access to tr element). Now I want to adopt this new pattern and do the same but I do not know how to change the entire row's background color conditionally based on one of its fields when using cell templates. Thanks in advance!
  • Shay Shmeltzer Tuesday, April 21, 2020
    Niek, this is probably a question for the JET forum. Maybe using the row-renderer attribute.
  • Vinay Sawant Tuesday, July 14, 2020
    Hello Shay,

    URL: https://blogs.oracle.com/shay/editable-tables-in-visual-builder-the-oracle-jet-81-approach

    The edit one is working fine without any issue however when trying to update the ADP its failing in the event ojBeforeRowEditEnd.

    We enabled the console and here is the log/flow. The rowKey is getting generated however we getting the error saying "update event has no keys set for the data, or the keys cannot be determined from the data, [object Object]"

    VBCS Version:
    Jet version: 8.1.3

    FireDataProviderEventAction called with a mutation event for operations: ["update"] and payloads: [{"data":{"effectiveEndDate":null,"effectiveStartDate":"2020-07-10","exclude":null,"id":20,"priority":3,"ruleCode":"RM_05","ruleName":"Customer Group Specific Collector"},"keys":4}] respectively.

    [VB (WARN), /vb/private/stateManagement/fireDataProviderEventAction]: No keys were specified in the event payload for the mutation operation update . Attempting to build keys from data.

    [VB (ERROR), /vb/private/stateManagement/fireDataProviderEventAction]: update event has no keys set for the data, or the keys cannot be determined from the data, [object Object]

  • Shay Shmeltzer Tuesday, July 14, 2020
    Vinay - a better place to handle this is on the forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    It might be that you need to pass an array and not a single value for the keys parameter to the event.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.