Oracle JET Components Demo Using Cookbook in Jdeveloper

Sharing is Caring

In this post, I am sharing how can we use Oracle JET Cookbook to understand basic UI components and How can we copy and use code from the cookbook. Here I am using JDeveloper 12.1.3 to create Oracle JET Components Demo Application.

In the previous post, I have explained about creating a JET application using JDeveloper. Here I am using the same application to show JET components demo. Oracle JET cookbook has many recipes that we can try in our application to learn more about coding pattern and toolkit structure.

Here you can access Oracle JET Cookbook

Now open your NavDrawer JET application in JDeveloper, Run it and you can see Dashboard page opened in the browser

JET Dashboard Module

You can see that this page tells the path of the file to edit in case you want to update its content

In JDeveloper select Project navigate to Web Content –> js and expand views and viewModels folder, Here you can see various HTML files and their corresponding javascript files. In this post, I am using the dashboard module for showing the JET components demo.

views and viewModels

Now open dashboard.html and dashboard.js file in the editor. We’ll work in these two files to learn about various JET components

oj-input-text (Input Text) Component

Goto Oracle JET Cookbook and navigate to input text demo page

Copy this code from demo.html

demo html file

and paste in dashboard.html, you can see that this piece of code contains HTML tag for showing a label, an input text and its value in the span element

<oj-label for="text-input">oj-input-text component</oj-label>
<oj-input-text id="text-input" value="{{value}}"></oj-input-text>
        
          <br/><br/>
        
<span class="oj-label">Current component value is: </span>
<span data-bind="text: value"></span>

Now we need to set the value of this input text component in the dashboard.js file, So copy this line

demo js file

and paste in the dashboard.js file under var self = this; line and don’t forget to add input text declaration (ojs/ojinputtext) in define block otherwise it’ll not appear on the page

/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext'], function (oj, ko, $) {

    function DashboardViewModel() {
        var self = this;

        this.value = ko.observable("Green");
.
.
.

Here you can see that Knockout js object ko is setting the value of JET input text component, Now run and check application

Oracle JET Input Text Demo

oj-select-one (Select One Choice) Component

Goto Oracle JET Cookbook and navigate to select one choice demo page

Copy code from demo.html and paste in the dashboard.html, Here goes the code of dashboard.html

<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div>
        <oj-label for="basicSelect">Select One</oj-label>
         
        <oj-select-one id="basicSelect" value="{{val}}" style="max-width:20em">
            <oj-option value="IE">Internet Explorer</oj-option>
            <oj-option value="FF">Firefox</oj-option>
            <oj-option value="CH">Chrome</oj-option>
            <oj-option value="OP">Opera</oj-option>
            <oj-option value="SA">Safari</oj-option>
        </oj-select-one>
         
        <br/>
         
        <oj-label for="curr-value">Current selected value is</oj-label>
         
        <span id="curr-value">
            <oj-bind-text value="[[val]]"></oj-bind-text></span>
    </div>
</div>

You can understand from the above code that a select one choice and its items are defined using JET HTML tags, Now set the initial value of this component in the dashboard.js file and don’t forget to add select one choice declaration (ojs/ojselectcombobox) in define block

/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox'], function (oj, ko, $) {

    function DashboardViewModel() {
        var self = this;

        this.val = ko.observable("CH");
.
.

Run and check application, You can see a select one choice rendered on the page and its value is set using val variable

Oracle JET SelectOneChoice Demo

oj-radioset (Radio Button Group) Component

Goto Oracle JET Cookbook and navigate to radio set demo page

Copy entire form from demo.html and paste in the dashboard.html page, this form contains a radio set and an additional button that changes the value of radio set. Here you’ll also learn about button action.

<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div id="formId" class="oj-form">
        <oj-label id="mainlabelid">Colors</oj-label>
         
        <!-- You need to set the labelled-by attribute
               to make this accessible.
               role="radiogroup" is set for you by oj-radioset. -->
         
        <oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid" value="{{currentColor}}">
            <!-- This is an example of how to use oj-bind-for-each, along with oj-bind-text to 
                   iterate over an array of objects-->
            <oj-bind-for-each data="[[colorOptions]]">
                <template>
                    <oj-option id="[[$current.data.id]]" value="[[$current.data.value]]">
                        <oj-bind-text value="[[$current.data.color]]"></oj-bind-text>
                    </oj-option>
                </template>
            </oj-bind-for-each>
        </oj-radioset>
         
        <br/>
         
        <span>Current component value is: </span>
         
        <span id="curr-value" data-bind="text: currentColor"></span>
         
        <br/>
         
        <br/>
        <div id='buttons-container'>
            <oj-button id='inputButton4' on-oj-action='[[setModelCurrentColorToBlue]]'>Set model currentColor to blue</oj-button>
        </div>
    </div>
</div>

Now use this code in the dashboard.js file, that populates radio set from an observable array and a method that is called on button click. Focus on the variable names and you’ll understand how they are referenced from UI components.

/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojradioset', 'ojs/ojbutton', 'ojs/ojlabel'], function (oj, ko, $) {

    function DashboardViewModel() {
        var self = this;
        // this variable keeps track of the currentColor. 
        // It's a Knockout observable which
        // means it is a two-way binding.
        self.currentColor = ko.observable("red");
        
        //Array that populates Radio Set
        self.colorOptions = ko.observableArray([
        {id : "blueopt", value : "blue", color : "Blue"},
        {id : "greenopt", value : "green", color : "Green"},
        {id : "redopt", value : "red", color : "Red"},
        {id : "limeopt", value : "lime", color : "Lime"},
        {id : "aquaopt", value : "aqua", color : "Aqua"},]);
        
        //Method that is called on button click
        self.setModelCurrentColorToBlue = function () {
            alert("Set model currentColor to blue.");
            self.currentColor("blue");
            return true;
        }
.
.
.

Now run the application and check button functionality.

Oracle JET Radio Set Demo

oj-table (JET table) Component

Goto Oracle JET Cookbook and navigate to JET table demo page

Read the recipe carefully and try to understand the code, Here JET table is populated using ArrayDataProvider. Here goes the code for dashboard.html

<oj-table id='table' aria-label='Departments Table'
                                        data='[[dataprovider]]'
                                        selection-mode='{"row": "multiple", "column": "multiple"}'
                                        dnd='{"reorder": {"columns": "enabled"}}'
                                        scroll-policy='loadMoreOnScroll'
                                        scroll-policy-options='{"fetchSize": 10}'
                                        columns='[{"headerText": "Department Id", 
                                                   "field": "DepartmentId",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Department Name", 
                                                   "field": "DepartmentName",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Location Id", 
                                                   "field": "LocationId",
                                                   "headerClassName": "oj-sm-only-hide",
                                                   "className": "oj-sm-only-hide",
                                                   "resizable": "enabled"},
                                                  {"headerText": "Manager Id", 
                                                   "field": "ManagerId",
                                                   "resizable": "enabled"}]'
                                        style='width: 100%; height: 300px;'>
</oj-table>

and dashboard.js code goes like this, Here deptArray is passed in ArrayDataProvider to populate data in the JET table.

/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojarraydataprovider','ojs/ojknockout','ojs/ojtable'], 
function (oj, ko, $, ArrayDataProvider) {

    function DashboardViewModel() {
        var self = this;
        
        var deptArray = [
        {DepartmentId: 3, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 5, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1009, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 1011, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 2011, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 3011, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 4011, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 5011, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 6011, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 7011, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 8011, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 9011, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 10011, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 11011, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 12011, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 13011, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
        {DepartmentId: 14011, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
        {DepartmentId: 15011, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
        {DepartmentId: 21022, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
        {DepartmentId: 22022, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 23022, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
        {DepartmentId: 24022, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
        {DepartmentId: 25022, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
        {DepartmentId: 26022, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
        {DepartmentId: 27022, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
        {DepartmentId: 28022, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
        {DepartmentId: 29022, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
        {DepartmentId: 310022, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
        {DepartmentId: 311022, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
        {DepartmentId: 312022, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
        {DepartmentId: 313022, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
    
        self.dataprovider = new ArrayDataProvider(deptArray, {keyAttributes: 'DepartmentId', implicitSort: [{attribute: 'DepartmentId', direction: 'ascending'}]});
        .
        .
        .

Run application and check

Oracle JET table demo

oj-data-grid (Data Grid) Component

Goto Oracle JET Cookbook and navigate to data grid demo page

dashboard.html file code

<oj-data-grid id="datagrid" 
            style="width:100%;max-width:234px;height:130px" 
            aria-label="Data Grid Cell Based Grid Demo" 
            data="[[dataSource]]">
</oj-data-grid>

dashboard.js file code, Here you can see how data array used as grid’s data source

/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojknockout','ojs/ojdatagrid', 'ojs/ojarraydatagriddatasource'], 
function (oj, ko, $, ArrayDataProvider) {

    function DashboardViewModel() {
        var self = this;
        
         var dataArray = [
            ['1', '2', '3'],
            ['4', '5', '6'],
            ['7', '8', '9']
        ];
        self.dataSource = new oj.ArrayDataGridDataSource(dataArray);
        .
        .

Run application and check

Oracle JET data grid demo

I’ll add some more UI Components Demo in this post later, Keep an eye on this page.

Cheers 🙂 Happy Learning

Related Posts

1 thought on “Oracle JET Components Demo Using Cookbook in Jdeveloper”

Leave a Reply

Your email address will not be published. Required fields are marked *