Thursday, May 19, 2016

Oracle JET Master-Detail with ADF BC REST

One of the most typical use cases in enterprise applications - Master-Detail relationship implementation. I have decided to implement it in JET and to share this practical implementation with you. Hopefully it will be useful, when you will be learning and building JET applications.

Sample application - implements a table with row selection in JET (you must run ADF BC REST application in JDEV 12.2.1 and JET in NetBeans 8). On row selection, Job ID is retrieved from selected row and based on this - Job data is fetched. Minimum and Maximum salary values are fetched from Job data and displayed in the chart, along with selected employee salary. I'm executing separate REST call for each new selection in the master and detail data change, see how fast data is being changed in the chart:

Detail data displayed in the chart is fetched based on Job ID selected in the master table:

Each time when new row is selected in the table, chart is changed (REST call to ADF BC is executed in the background, using Job ID for selected employee as a key):

Great thing about JET - it is responsive out of the box. On narrow screen, UI components are re-arranged into single column layout. Editable form is displayed below table:

Chart is displayed below editable form:

Let's take a look, how detail data displayed in the chart is fetched. First of all chart UI component is defined in HTML, it points to series value observable variable:

This observable variable is defined as array in JavaScript. Observable variable allows to push value changes to UI automatically, without additional intervention:

I have defined data structure for Job response, this includes JobId key, Minimum/Maximum values. REST URL will be assigned later, in the table selection listener. This URL will change for each selected row, to retrieve different REST resource. We leave model definition without REST URL here:

Table selection listener creates new model and executes fetch operation for the job. REST URL with Job key is constructed to fetch required detail data. In the success callback returned data is accessed and pushed into observable collection, which is displayed in the chart:

No comments: