Oracle JET Common Model – Interacting With REST Web Services

In the process of learning Oracle JET, this is another post about consuming REST Web Service using Oracle JET Common Model approach. Before going through this post I'll suggest you read my previous posts on Oracle JET.

Read more about JET Common Model and Collection

From the docs

The Oracle JET Common Model and Collection API provides a collection-of-records object model that includes classes for bringing external data into an Oracle JET application and mapping the data to the application’s view model.

The Oracle JET Common Model and Collection API provides a collection-of-records object model that includes the following classes:

oj.Model: Represents a single record from a data service such as a REST service

oj.Collection: Represents a set of data records and is a list of oj.Model objects of the same type

Here I am using the same JET nav drawer template application that is used in my first post - Using Oracle JET with JDeveloper

Add an oj-table component in the customers.html page and define the required number of columns to show employee details.

1. <div class="oj-hybrid-padding">
2. <h1>Customers Content Area</h1>
3. <div>
4. <oj-table id="table" summary="Employee List" aria-label="Employee Table"
5. dnd='{"reorder": {"columns": "enabled"}}'
6. scroll-policy='loadMoreOnScroll'
7. scroll-policy-options='{"fetchSize": 10}'
8. data='[[datasource]]'
9. columns='[{"headerText": "Employee Id",
10. "field": "EmployeeId"},
11. {"headerText": "Employee Name",
12. "field": "EmployeeName"},
13. {"headerText": "Salary",
14. "field": "EmployeeSalary"},
15. {"headerText": "Age",
16. "field": "EmployeeAge"}]'
17. style='width: 100%; height: 400px;'>
18. </oj-table>
19. </div>
20. </div>

Here goes the code of view model customers.js that reads data from web service and bind it to UI table. Read all comments to understand JS code

1. /**
2. * @license
3. * Copyright (c) 2014, 2019, Oracle and/or its affiliates.
4. * The Universal Permissive License (UPL), Version 1.0
5. */
6. /*
7. * Your customer ViewModel code goes here
8. */
9. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojtable', 'ojs/ojcollectiontabledatasource', 'ojs/ojknockout', 'ojs/ojmodel'],
10. function (oj, ko, $) {
12. function CustomerViewModel() {
13. var self = this;
14. //URL of REST Web Service
15. self.serviceURL = 'http://dummy.restapiexample.com/api/v1/employees';
17. //An observable to hold Employee Collection
18. self.EmpCol = ko.observable();
20. //An observable to show Employess in JET table using knockout data binding
21. self.datasource = ko.observable();
24. // Map attributes returned from REST Web service to view model attribute names
26. self.parseEmp = function (response) {
27. return {
28. EmployeeId : response['id'],
29. EmployeeName : response['employee_name'],
30. EmployeeSalary : response['employee_age'],
31. EmployeeAge : response['employee_salary']
32. };
33. };
35. //ojModel to hold single employee record
36. self.Employee = oj.Model.extend( {
37. urlRoot : self.serviceURL,
38. parse : self.parseEmp,
39. idAttribute : 'EmployeeId'
40. });
42. self.emp = new self.Employee();
44. //ojCollection to hold all employees
45. self.EmpCollection = oj.Collection.extend( {
46. url : self.serviceURL,
47. model : self.emp,
48. comparator : "EmployeeId"
49. });
51. self.EmpCol(new self.EmpCollection());
53. //JET utility to convert ojCollection in row and column format
54. self.datasource(new oj.CollectionTableDataSource(self.EmpCol()));
55. }
57. /*
58. * Returns a constructor for the ViewModel so that the ViewModel is constructed
59. * each time the view is displayed. Return an instance of the ViewModel if
60. * only one instance of the ViewModel is needed.
61. */
62. return new CustomerViewModel;
63. });

Now run and check the application

Cheers 🙂 Happy Learning

Show Indian Currency Format in ADF using currencyFormatter jQuery

 Previously I have posted about Change af:converNumber format according to Locale but there is no option to show Indian currency format directly using locale so Here I am writing about showing Indian Currency format in ADF components using the currencyFormatter jQuery library.

From the docs

CurrencyFormatter.js allows you to format numbers as currencies. It contains 155 currency definitions and 715 locale definitions out of the box. It handles unusually formatted currencies, such as the INR.

Indian currency format is a bit unusual as it uses variable-width grouping, See the below image to understand how numbers are grouped in INR.

Let's see how to use the currencyFormatter jQuery library in our ADF application. Created an ADF Application and dropped an input text component on the page to enter the amount

Added jQuery library using resource tag under af:document

1. <af:resource type="javascript"
2. source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
4. <af:resource type="javascript"
5. source="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.js"/>

Here goes the javascript function that formats the amount

1. <af:resource type="javascript">
2. function changeFormatInd(evt) {
3. var val = $('input[name="it2"]').val();
4. val.replace(/\,/g, "");
5. var str2 = val.replace(/\,/g, "");
6. //alert(str2);
7. $('input[name="it2"]').val(OSREC.CurrencyFormatter.format(str2,
8. {
9. currency : 'INR', symbol : ''
10. }))
11. }
12. </af:resource>

Called this function on value change event of input text using client listener

1. <af:inputText label="Amount" id="it2"
2. contentStyle="width:300px;padding:8px;font-weight:bold;color:#006394;font-size:30px;">
3. <af:clientListener method="changeFormatInd" type="valueChange"/>
4. </af:inputText>

Now run application and check

Cheers 🙂 Happy Learning