JET Fetch API example

Oracle JET 4.2.0 using CDN

by apasaja

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<h3>Oracle JET example using fetch API</h3>
<span>This demo will not run in Internet Explorer 11 because of the use of the HTML5 template element and ES6 fetch API.</span>
<br/>
<hr/><br/>
<h1>Users List</h1>
<br/>
<oj-table id='table' aria-label='Departments Table' data='[[dataSource]]' columns-default.sortable='disabled' columns='[
                {"headerText": "Employee Number", "field": "empno"},
                {"headerText": "Username", "field": "ename"},
                {"headerText": "Title", "field": "job"},
                {"headerText": "Hire Date", "field": "hiredate"}, 
                {"headerText": "Salary", "field": "sal"}
            ]' row-renderer="[[oj.KnockoutTemplateUtils.getRenderer('row_template', true)]]">
</oj-table>

<template id="row_template">
  <tr>
    <td>
      <oj-bind-text value="[[empno]]"></oj-bind-text>
    </td>
    <td>
      <oj-bind-text value="[[ename]]"></oj-bind-text>
    </td>
    <td>
      <oj-bind-text value="[[job]]"></oj-bind-text>
    </td>
    <td>
      <oj-bind-text value="[[$parent.formatDate(hiredate)]]"></oj-bind-text>
    </td>
    <td>
      <oj-bind-text value="[[$parent.formatSal(sal)]]"></oj-bind-text>
    </td>
  </tr>
</template>

CSS

@import url('//static.oracle.com/cdn/jet/v4.2.0/default/css/alta/oj-alta-min.css');

JavaScript

require(['knockout',
  'ojs/ojcore',
  'ojs/ojknockout',
  'ojs/ojtable',
  'ojs/ojarraytabledatasource',
  'ojs/ojvalidation-datetime',
  'ojs/ojvalidation-number'
], function(ko, oj) {
  'use strict';

  var ViewModel = function() {
    var self = this;

    // for salary fields
    var salOptions = {
      style: 'currency',
      currency: 'USD'
    };
    var salaryConverter = oj.Validation.converterFactory("number").createConverter(salOptions);

    // for date fields
    var dateOptions = {
      formatStyle: 'date',
      dateFormat: 'medium'
    };
    var dateConverter = oj.Validation.converterFactory("datetime").createConverter(dateOptions);

    self.formatSal = data => salaryConverter.format(data);
    self.formatDate = data => dateConverter.format(data);

    self.data = ko.observableArray();
    fetch("https://apex.oracle.com/pls/apex/oraclejet/emp/",
		{
			tk: "abc"
		}
	)
      .then(users => {
        return users.json();
      })
      .then(users => {
        var tempArray = [];
        users.items.forEach(function(item) {
          tempArray.push({
            empno: item.empno,
            ename: item.ename,
            job: item.job,
            hiredate: item.hiredate,
            sal: item.sal
          });
        });
        self.data(tempArray);
      })

    self.dataSource = new oj.ArrayTableDataSource(
      self.data, {
        idAttribute: 'empno'
      }
    );
  };
  ko.applyBindings(new ViewModel());
});

function _getCDNPath(paths) {
  var cdnPath = "https://static.oracle.com/cdn/jet/";
  var ojPath = "v4.2.0/default/js/";
  var thirdpartyPath = "v4.2.0/3rdparty/";
  var keys = Object.keys(paths);
  var newPaths = {};

  function _isoj(key) {
    return (key.indexOf('oj') === 0 && key !== 'ojdnd');
  }
  keys.forEach(function(key) {
    newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
  });
  return newPaths;
}

requirejs.config({
  paths: _getCDNPath({
    'knockout': 'knockout/knockout-3.4.0',
...