Oracle JET Components Demo Using Cookbook in Jdeveloper

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 the JET components demo. Oracle JET cookbook has many recipes that we can try in our application to learn more about coding patterns and toolkit structure.

Here you can access Oracle JET Cookbook

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

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.

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

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

1. <oj-label for="text-input">oj-input-text component</oj-label>
2. <oj-input-text id="text-input" value="{{value}}"></oj-input-text>
4. <br/><br/>
6. <span class="oj-label">Current component value is: </span>
7. <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

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

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
9. this.value = ko.observable("Green");
10. .
11. .
12. .

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

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

1. <div class="oj-hybrid-padding">
2. <h1>Dashboard Content Area</h1>
3. <div>
4. <oj-label for="basicSelect">Select One</oj-label>
6. <oj-select-one id="basicSelect" value="{{val}}" style="max-width:20em">
7. <oj-option value="IE">Internet Explorer</oj-option>
8. <oj-option value="FF">Firefox</oj-option>
9. <oj-option value="CH">Chrome</oj-option>
10. <oj-option value="OP">Opera</oj-option>
11. <oj-option value="SA">Safari</oj-option>
12. </oj-select-one>
14. <br/>
16. <oj-label for="curr-value">Current selected value is</oj-label>
18. <span id="curr-value">
19. <oj-bind-text value="[[val]]"></oj-bind-text></span>
20. </div>
21. </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

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
9. this.val = ko.observable("CH");
10. .
11. .

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

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.

1. <div class="oj-hybrid-padding">
2. <h1>Dashboard Content Area</h1>
3. <div id="formId" class="oj-form">
4. <oj-label id="mainlabelid">Colors</oj-label>
6. <!-- You need to set the labelled-by attribute
7. to make this accessible.
8. role="radiogroup" is set for you by oj-radioset. -->
10. <oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid" value="{{currentColor}}">
11. <!-- This is an example of how to use oj-bind-for-each, along with oj-bind-text to
12. iterate over an array of objects-->
13. <oj-bind-for-each data="[[colorOptions]]">
14. <template>
15. <oj-option id="[[$current.data.id]]" value="[[$current.data.value]]">
16. <oj-bind-text value="[[$current.data.color]]"></oj-bind-text>
17. </oj-option>
18. </template>
19. </oj-bind-for-each>
20. </oj-radioset>
22. <br/>
24. <span>Current component value is: </span>
26. <span id="curr-value" data-bind="text: currentColor"></span>
28. <br/>
30. <br/>
31. <div id='buttons-container'>
32. <oj-button id='inputButton4' on-oj-action='[[setModelCurrentColorToBlue]]'>Set model currentColor to blue</oj-button>
33. </div>
34. </div>
35. </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.

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojradioset', 'ojs/ojbutton', 'ojs/ojlabel'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
8. // this variable keeps track of the currentColor.
9. // It's a Knockout observable which
10. // means it is a two-way binding.
11. self.currentColor = ko.observable("red");
13. //Array that populates Radio Set
14. self.colorOptions = ko.observableArray([
15. {id : "blueopt", value : "blue", color : "Blue"},
16. {id : "greenopt", value : "green", color : "Green"},
17. {id : "redopt", value : "red", color : "Red"},
18. {id : "limeopt", value : "lime", color : "Lime"},
19. {id : "aquaopt", value : "aqua", color : "Aqua"},]);
21. //Method that is called on button click
22. self.setModelCurrentColorToBlue = function () {
23. alert("Set model currentColor to blue.");
24. self.currentColor("blue");
25. return true;
26. }
27. .
28. .
29. .

Now run the application and check button functionality.

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

1. <oj-table id='table' aria-label='Departments Table'
2. data='[[dataprovider]]'
3. selection-mode='{"row": "multiple", "column": "multiple"}'
4. dnd='{"reorder": {"columns": "enabled"}}'
5. scroll-policy='loadMoreOnScroll'
6. scroll-policy-options='{"fetchSize": 10}'
7. columns='[{"headerText": "Department Id",
8. "field": "DepartmentId",
9. "headerClassName": "oj-sm-only-hide",
10. "className": "oj-sm-only-hide",
11. "resizable": "enabled"},
12. {"headerText": "Department Name",
13. "field": "DepartmentName",
14. "resizable": "enabled"},
15. {"headerText": "Location Id",
16. "field": "LocationId",
17. "headerClassName": "oj-sm-only-hide",
18. "className": "oj-sm-only-hide",
19. "resizable": "enabled"},
20. {"headerText": "Manager Id",
21. "field": "ManagerId",
22. "resizable": "enabled"}]'
23. style='width: 100%; height: 300px;'>
24. </oj-table>

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

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojarraydataprovider','ojs/ojknockout','ojs/ojtable'],
5. function (oj, ko, $, ArrayDataProvider) {
7. function DashboardViewModel() {
8. var self = this;
10. var deptArray = [
11. {DepartmentId: 3, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
12. {DepartmentId: 5, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
13. {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
14. {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
15. {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
16. {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
17. {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
18. {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
19. {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
20. {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
21. {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
22. {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
23. {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
24. {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
25. {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
26. {DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
27. {DepartmentId: 1009, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
28. {DepartmentId: 1011, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
29. {DepartmentId: 2011, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
30. {DepartmentId: 3011, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
31. {DepartmentId: 4011, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
32. {DepartmentId: 5011, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
33. {DepartmentId: 6011, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
34. {DepartmentId: 7011, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
35. {DepartmentId: 8011, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
36. {DepartmentId: 9011, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
37. {DepartmentId: 10011, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
38. {DepartmentId: 11011, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
39. {DepartmentId: 12011, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
40. {DepartmentId: 13011, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
41. {DepartmentId: 14011, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
42. {DepartmentId: 15011, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
43. {DepartmentId: 21022, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
44. {DepartmentId: 22022, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
45. {DepartmentId: 23022, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
46. {DepartmentId: 24022, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
47. {DepartmentId: 25022, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
48. {DepartmentId: 26022, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
49. {DepartmentId: 27022, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
50. {DepartmentId: 28022, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
51. {DepartmentId: 29022, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
52. {DepartmentId: 310022, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
53. {DepartmentId: 311022, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
54. {DepartmentId: 312022, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
55. {DepartmentId: 313022, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
57. self.dataprovider = new ArrayDataProvider(deptArray, {keyAttributes: 'DepartmentId', implicitSort: [{attribute: 'DepartmentId', direction: 'ascending'}]});
58. .
59. .
60. .

Run application and check

oj-data-grid (Data Grid) Component

Goto Oracle JET Cookbook and navigate to data grid demo page

dashboard.html file code

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

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

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojknockout','ojs/ojdatagrid', 'ojs/ojarraydatagriddatasource'],
5. function (oj, ko, $, ArrayDataProvider) {
7. function DashboardViewModel() {
8. var self = this;
10. var dataArray = [
11. ['1', '2', '3'],
12. ['4', '5', '6'],
13. ['7', '8', '9']
14. ];
15. self.dataSource = new oj.ArrayDataGridDataSource(dataArray);
16. .
17. .

Run application and check

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

Cheers 🙂 Happy Learning