Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Web Services. Show all posts
Showing posts with label Web Services. Show all posts

Monday 27 May 2019

Oracle JET Common Model Factory Method to Consume REST Services

 Previously I have posted about consuming web services in Oracle JET using jQuery method and using Oracle JET Common Model. I have seen the Oracle JET Common Model Factory method in one of the blog and in MOOC course so tried the same but because of some version change or problem it was not working as expected but I got a solution in the OTN JET forum and sharing same here for reference.



Here I am using the same JET nav drawer template application that is used in my first post – Using Oracle JET with JDeveloper. and using ADF BC based REST web service

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

  1. <div class="oj-hybrid-padding">
  2. <h1>Dashboard Content Area</h1>
  3. <div id="div1">
  4. <oj-table id="table" summary="Department List"
  5. aria-label="Departments Table"
  6. data='[[datasource]]'
  7. columns='[{"headerText": "Department Id",
  8. "field": "DepartmentId"},
  9. {"headerText": "Department Name",
  10. "field": "DepartmentName"},
  11. {"headerText": "Location Id",
  12. "field": "LocationId"},
  13. {"headerText": "Manager Id",
  14. "field": "ManagerId"}]'>
  15. </oj-table>
  16. </div>
  17. </div>

Next is to create a Factory JS file that holds the basic code for calling web service and read its response (Oracle JET Common Model and Collection is used in a separate file for better understanding of code )



Here goes the code for DeptFactory.js

  1. define(['ojs/ojcore'], function (oj) {
  2. var DeptFactory = {
  3. resourceUrl : 'http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department',
  4. // Single Department Model
  5. createDeptModel : function () {
  6. var dept = oj.Model.extend( {
  7. urlRoot : this.resourceUrl,
  8. idAttribute : "DepartmentId"
  9. });
  10. return new dept();
  11. },
  12. // Departments Collection
  13. createDepartmentsCollection : function () {
  14. var departments = oj.Collection.extend( {
  15. url : this.resourceUrl,
  16. model : this.createDeptModel(),
  17. comparator : "DepartmentId"
  18. });
  19. return new departments();
  20. }
  21. };
  22. return DeptFactory;
  23. });

And this Factory JS is used in dashboard.js View Model to populate data in the JET table

  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 dashboard ViewModel code goes here
  8. */
  9. define(['ojs/ojcore', 'knockout', 'jquery', 'DeptFactory', 'ojs/ojtable', 'ojs/ojcollectiontabledatasource'],
  10. function (oj, ko, $, DeptFactory) {
  11. function DashboardViewModel() {
  12. var self = this;
  13. self.deptCollection = DeptFactory.createDepartmentsCollection();
  14. self.datasource = ko.observable()
  15. // Setting collection in row and column format to show in JET table
  16. self.datasource(new oj.CollectionTableDataSource(this.deptCollection));
  17. }
  18. return new DashboardViewModel;
  19. });

Now run application and check, Department details are populated in the table from web service



So this is how we can use the Oracle JET Common Model Factory method to consume REST web services.

Cheers 🙂 Happy Learning

Wednesday 24 April 2019

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, $) {
  11. function CustomerViewModel() {
  12. var self = this;
  13. //URL of REST Web Service
  14. self.serviceURL = 'http://dummy.restapiexample.com/api/v1/employees';
  15. //An observable to hold Employee Collection
  16. self.EmpCol = ko.observable();
  17. //An observable to show Employess in JET table using knockout data binding
  18. self.datasource = ko.observable();
  19. // Map attributes returned from REST Web service to view model attribute names
  20. self.parseEmp = function (response) {
  21. return {
  22. EmployeeId : response['id'],
  23. EmployeeName : response['employee_name'],
  24. EmployeeSalary : response['employee_age'],
  25. EmployeeAge : response['employee_salary']
  26. };
  27. };
  28. //ojModel to hold single employee record
  29. self.Employee = oj.Model.extend( {
  30. urlRoot : self.serviceURL,
  31. parse : self.parseEmp,
  32. idAttribute : 'EmployeeId'
  33. });
  34. self.emp = new self.Employee();
  35. //ojCollection to hold all employees
  36. self.EmpCollection = oj.Collection.extend( {
  37. url : self.serviceURL,
  38. model : self.emp,
  39. comparator : "EmployeeId"
  40. });
  41. self.EmpCol(new self.EmpCollection());
  42. //JET utility to convert ojCollection in row and column format
  43. self.datasource(new oj.CollectionTableDataSource(self.EmpCol()));
  44. }
  45. /*
  46. * Returns a constructor for the ViewModel so that the ViewModel is constructed
  47. * each time the view is displayed. Return an instance of the ViewModel if
  48. * only one instance of the ViewModel is needed.
  49. */
  50. return new CustomerViewModel;
  51. });

Now run and check the application



Cheers 🙂 Happy Learning