Populate Oracle JET table from JSON based REST Web Service

 Before starting with this post first go through my previous post about using JET with JDeveloper. Here I am using the same JET nav drawer template application. In this post, we'll see how to consume JSON based REST Web Service and populate data in the Oracle JET table (oj-table) component

We have the URL of REST Web Service - http://dummy.restapiexample.com/api/v1/employees, it returns a list of employees and their details.

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 multiple details of an Employee so I have taken 4 columns for Id, Name, Salary, and Age

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": "ID",
12. "field": "emp_id",
13. "resizable": "enabled"},
15. {"headerText": "Name",
16. "field": "emp_name",
17. "resizable": "enabled"},
19. {"headerText": "Salary",
20. "field": "emp_sal",
21. "resizable": "enabled"},
23. {"headerText": "Age",
24. "field": "emp_age",
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'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
8. //Define a Knockout observable array and name it tabData
9. self.tabData = ko.observableArray();
11. //Use jQuery method to call REST Web Service
12. $.getJSON("http://dummy.restapiexample.com/api/v1/employees").then(function (employees) {
13. $.each(employees, function () {
14. //Push data in Observable array
15. self.tabData.push( {
16. emp_id : this.id,
17. emp_name : this.employee_name,
18. emp_sal : this.employee_salary,
19. emp_age : this.employee_age
20. });
21. });
22. });
24. //Pass observable array in utility class to show data in table
25. self.datasource = new oj.ArrayTableDataSource(self.tabData,
26. {
27. idAttribute : 'emp_id'
28. });
29. .
30. .
31. .

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 in tabular format data.

Here id, employee_name, employee_salary, employee_age are the attribute's names returned by Web Service in JSON format.

Now right click on the index.html file in JDeveloper and choose run

and see Oracle JET table in the browser, Data is populated from Web Service. In the same way, you can try some other Web Service URLs.

All Done :)

Cheers 🙂 Happy Learning

Read more about Oracle JET Components

Use jQuery Mask to format ADF Input Component

 In this post, I am showing a very interesting and useful jQuery plugin - jQuery Mask Plugin. We can use this plugin to format (mask) input component of ADF form with minimal code

Here I'll show you some examples of masking

Follow these steps to implement this in ADF Application

Create a page in the view controller project of Fusion Web Application and drop an input text in it.

1. <af:inputText label="Label 1" id="it1" >
2. </af:inputText>

Now add the jQuery library to the page under the document tag

1. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
2. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"/>

Now I am writing a simple jQuery function that masks value of the input field in date format (dd/mm/yyyy)  and add this function to page using resource tag

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('00/00/0000');
4. }
5. </af:resource>

Add a client listener to inputText to call jQuery function as soon as the user starts typing

1. <af:inputText label="Label 1" id="it1" >
2. <af:clientListener method="maskUserInput" type="keyDown"/>
3. </af:inputText>

Now run and enter some value in the input field and with typing, it'll mask user input

Now try changing the format as per your requirement, Suppose I need to mask the phone number in (+XX)-XXXXXXXXXX format, so for that, I have used this function.

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('(+00)-0000000000');
4. }
5. </af:resource>

and output is

IP Address

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('099.099.099.099');
4. }
5. </af:resource>

Output is

You can always change the jQuery function as per your requirement.

Cheers 🙂 Happy Learning