Populate Oracle JET table on top of Oracle ADF BC using REST Web Service

 Previously I have posted about creating REST Web Service from ADF Application Module and in this post, I am going to use the same REST service for populating data in a JET table. Here we'll populate JET table on top of Oracle ADF BC (Business Components).

Here I am taking the same sample application that I have discussed in my first post Getting started with Oracle JET and JDeveloper

The URL of ADF BC based web service is http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department and it returns a list of Departments in nested JSON format

Let’s see the implementation part

Add an oj-table component in the dashboard.html page and define the required number of columns, this web service returns a list of Departments so I have taken 4 columns for Department Id, Department Name, Manager Id, and Location Id

1. <div class="oj-hybrid-padding">
2. <h1>Dashboard Content Area</h1>
3. <div id="div1">
5. <oj-table id='table' aria-label='Departments Table'
6. data='[[datasource]]'
7. selection-mode='{"row": "multiple", "column": "multiple"}'
8. dnd='{"reorder": {"columns": "enabled"}}'
9. scroll-policy='loadMoreOnScroll'
10. scroll-policy-options='{"fetchSize": 10}'
11. columns='[{"headerText": "Department Id",
12. "field": "dept_id",
13. "resizable": "enabled"},
15. {"headerText": "Department Name",
16. "field": "dept_name",
17. "resizable": "enabled"},
19. {"headerText": "Manager Id",
20. "field": "mgr_id",
21. "resizable": "enabled"},
23. {"headerText": "Location Id",
24. "field": "loc_id",
25. "resizable": "enabled"}
26. ]'
27. style='width: 100%; height: 400px;'>
28. </oj-table>
30. </div>
31. </div>

Now see the code of dashboard.js, Read comments to understand the javascript code, Here getJSON() method of jQuery is used to call REST Web Service as jQuery is a part of Oracle JET libraries.

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
5. function (oj, ko, $) {
7. function DashboardViewModel() {
8. var self = this;
9. //Define a Knockout observable array and name it tabData
10. self.tabData = ko.observableArray();
12. //Use jQuery method to call REST Web Service
13. $.getJSON("http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department").
14. then(function (departments) {
15. //JSON response is nested that's why 'items' is used to access records
16. $.each(departments.items, function () {
17. //Push data in Observable array
18. self.tabData.push( {
19. dept_id : this.DepartmentId,
20. dept_name : this.DepartmentName,
21. mgr_id : this.ManagerId,
22. loc_id : this.LocationId
23. });
24. });
25. });
27. //Pass observable array in utility class to show data in table
28. self.datasource = new oj.ArrayTableDataSource(self.tabData,
29. {
30. idAttribute : 'dept_id'
31. });
32. .
33. .
34. .

tabData is a knockout observable array that is defined to hold returned value and you can see that
self.tabData.push is used to push web service data into this array and at last a JET utility class
ArrayTableDataSource is used to convert this observable array into tabular format data.

Now run the application and you can see that a JET table is populated with Departments data

Cheers 🙂 Happy Learning