Simple CRUD Implementation with Oracle JET - Part III

This is third and last part in JET CRUD series. I already had a post about JET CRUD few months ago - Very Practical CRUD with JET and ADF BC - POST and DELETE Methods. But current approach is more simple and better structured. I will go through CREATE, UPDATE and DELETE operations.

You can download or view source code (JET app and ADF BC REST app) directly in GitHub  repository - jetcrud.

CREATE

We need to initalize new model when creating new row, this is done in addCustomer.js - empty model is initialized. Model is initialized from common module definition - customController (read more about it in my previous post - Better Oracle JET Code Structuring with Your Own Modules - Part II):

Important trick which will save lines of code - you can reference model attributes directly, no need to list all of them in advance. Data bind form component to JET model variable:

Each input could point to the attribute, this is UI will get/set value to View Model:

New model must be posted through JET model API create operation. Here we can convert model to JSON and use it as parameter for create:

This is how it looks on UI - form with new customer data. Press Save button:

Behind the scenes REST POST method will be executed and data will be posted to the backend, where it will be processed and inserted into DB:

New row is saved and visible in the results table:

UPDATE

Edit form implementation is very similar to create, actually it can be even combined into one. The only difference is how you initialize current row for editing (check - Oracle JET CRUD - Search and Edit Form - Part I). And how you save the changes - must use different method from Oracle JET model API - save. The rest is very similar to create operation handling:

Edit form UI - it renders different set of fields:

Behind the scenes it executes REST PATCH method, which will update only changed attributes:

DELETE

This is the simplest operation from all three. You should get instance of row to delete. This can be done through JavaScript promise, JET would not return actual model instantly. It return promise and you get model asynchronously. Call JET model API destroy operation to remove row entry:

Row is selected and removed:

Behind the scenes it calls REST DELETE method and removes row from backend:

Read previous posts:

1. Oracle JET CRUD - Search and Edit Form - Part I
2. Better Oracle JET Code Structuring with Your Own Modules - Part II