Oracle JET Base FIddle

v6.0.0 base fiddle using CDN

by Evan Chavez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<h1>Users List</h1>
<span>This demo will not run in Internet Explorer 11 because of the use of the HTML5 template element.</span>
<br/><br/>

<!--  
JET UI components are implemented as custom elements following the HTML5 Web Component specification
You interact with them just like any other HTML DOM element.
-->
<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>

<!-- 
In this example, and external template is being used to customize the look and feel of each rows data.
JET provides built-in validators and converters. as well as the ability to create your own custom versions.
-->
<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

/**
The default theme for JET is based on Oracle's Alta UI spec.  
Theming is provided via SASS with full .scss source code provided
and a Theme Builder application to help build custom themes when needed.
**/

@import url('//static.oracle.com/cdn/jet/v6.0.0/default/css/alta/oj-alta-min.css');
body {
  padding: 20px;
}

JavaScript

/**
RequireJS is used for lazy loading of resources as well as dependency resolution.
**/

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


  /**
  JET uses a Model-View-ViewModel(MVVM) Architecture.
  **/
  var ViewModel = function() {
    var self = this;

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

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

    self.formatSal = function(data) {
      return salaryConverter.format(data);
    };

    self.formatDate = function(data) {
      return dateConverter.format(data);
    };

    /**
    Data interaction in a JET application is via web services such as REST, WebSockets, or any other
    service that returns JSON data.  You can use jQuery AJAX, as shown below, ES6 fetch(), or XHR methods.  JET also provides a Common Model API that helps with full CRUD type of operations.
    **/
    self.data = ko.observableArray([]);
    $.getJSON("https://apex.oracle.com/pls/apex/oraclejet/emp/").
    then(function(users) {
      var tempArray = [];
      $.each(users.items, function() {
        tempArray.push({
          empno: this.empno,
          ename: this.ename,
          job: this.job,
          hiredate: this.hiredate,
          sal: this.sal
        });
      });
      self.data(tempArray);
    });

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


/**
JET libraries, as well as 3rd party libraries that are...