X

The Visual Builder Cloud Service Blog

  • August 21, 2018

Creating Editable Tables in Oracle Visual Builder Cloud Service

Shay Shmeltzer
Director of Product Management - Oracle

[Note - since publishing this entry, Visual Builder upgraded to use JET 6 which makes creating editables simpler - check out the new approach here.]

A common request I've been getting from customers of Visual Builder is to be able to edit multiple records that are shown in a table. Oracle JET has an editable table sample that shows how to do this in their cookbook, but the translation from the JET approach to the VBCS way of doing things was a bit tricky for some. I recorded a video and included basic instructions showing you how to implement the JET sample in your VBCS application below. 

Editable table

Beyond just implementing the UI aspect of the editable table, you also need to define a strategy of when and how you want to save the data from the table back to the data source. In the video below I'm using an approach that is easy to implement, but is probably not the best way to implement this. I loop through all the records and update them back to the data source one-by-one. A better approach will be to keep a list of rows that were changed and only send them to be updated.

Also - I'm using a button that saves the data all at once, you can alternatively use other events in the UI to save individual records - for example - maybe you'll want to save the data immediately when someone leaves a field.

The point is that this demo is not a "Best practice" but rather an explanation of the basic mechanisms - you should adopt it to your use case.

After this long intro, lets get into the details of what you need to do and what the video shows:

  • Creating ArrayDataProvider variable (0:50)
  • Populating the Array on page load with data (1:55)
  • Basing a table on an ArrayDataProvider (3:15)
    • How to add columns in a declarative way
  • Adding row templates to the page - one for read and one for update row (4:04)
    • Also shows how to manually add JET components to the page's definition
  • Adding a function to decide which row template to show (5:55)
    • Show how to add references to JQuery and Knockout to the function
    • Show how to modify the function definition to be regular pagemodule function
  • Adding a save operation (8:44) & Using a for loop in an action flow 
    • I use the $current.index value to get to the right variable

 

As you can see - at the end of the day this is not too complex. It is also just scratching the surface of what you can do with the table - as the JET sample shows you can have different field types, validators and more.

Some code from the sample I created:

Page HTML source


 

Celebrities


Save

Page JavaScript

define(['ojs/ojcore', 'knockout', 'jquery'], function(oj, ko, $) {
  'use strict';
  var PageModule = function PageModule() {
    var self = this;
    self._editRowRenderer = oj.KnockoutTemplateUtils.getRenderer(
      'editRowTemplate', true);
    self._navRowRenderer = oj.KnockoutTemplateUtils.getRenderer(
      'rowTemplate', true);
    PageModule.prototype.rowRenderer = function(context) {
      var mode = context['rowContext']['mode'];
      var renderer;
      if (mode === 'edit') {
        self._editRowRenderer(context);
      } else if (mode === 'navigation') {
        self._navRowRenderer(context);
      }
    };
  };
  return PageModule;
});

Join the discussion

Comments ( 3 )
  • Herman Mensinga Tuesday, September 25, 2018
    Nice blog!

    One thing is missing to get things working. You need to import the oj-input-text component.
  • Rakesh Kumar Singh Thursday, November 22, 2018
    Also Can you explain how the Celebrities Business object has been created.
  • Shay Shmeltzer Monday, November 26, 2018
    Rakesh, I used the import from excel functionality to create business objects - see for example this demo:
    https://www.youtube.com/watch?v=ox1Kd9LxMiU
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services