Here you can access Oracle JET Cookbook<\/a><\/p>\n\n\n\n Now open your NavDrawer JET application in JDeveloper, Run it and you can see Dashboard page opened in the browser<\/p>\n\n\n\n You can see that this page tells the path of the file to edit in case you want to update its content<\/p>\n\n\n\n In JDeveloper select Project navigate to Web Content \u2013> js<\/em> and expand views<\/strong> <\/em>and viewModels<\/strong> <\/em>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.<\/p>\n\n\n\n Now open dashboard.html<\/strong><\/em> and dashboard.js<\/strong><\/em> file in the editor. We\u2019ll work in these two files to learn about various JET components<\/p>\n\n\n\n Goto Oracle JET Cookbook and navigate to input text demo page<\/a><\/p>\n\n\n\n Copy this code from demo.html<\/strong><\/em><\/p>\n\n\n\n \n\nand paste in dashboard.html<\/em><\/strong>, 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\n\n<\/p>\n\n\n\n \n\nNow we need to set the value<\/strong> of this input text component in the dashboard.js file, So copy this line\n\n<\/p>\n\n\n\n \n\nand paste in the dashboard.js file under var self = this;<\/strong> line and don\u2019t forget to add input text declaration (ojs\/ojinputtext) in define block otherwise it\u2019ll not appear on the page\n\n<\/p>\n\n\n\n \n\nHere you can see that Knockout js object ko<\/strong> is setting the value of JET input text component, Now run and check application\n\n<\/p>\n\n\n\n Goto Oracle JET Cookbook and navigate to select one choice demo page<\/a><\/p>\n\n\n\n Copy code from demo.html<\/strong> <\/em>and paste in the dashboard.html,<\/strong><\/em> Here goes the code of dashboard.html<\/strong><\/em><\/p>\n\n\n\n \n\nYou 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<\/strong><\/em> file and don\u2019t forget to add select one choice declaration (ojs\/ojselectcombobox)<\/strong><\/em> in define block\n\n<\/p>\n\n\n\n \n\nRun and check application, You can see a select one choice rendered on the page and its value is set using val<\/strong><\/em> variable\n\n<\/p>\n\n\n\n Goto Oracle JET Cookbook and navigate to radio set demo page<\/a><\/p>\n\n\n\n Copy entire form from demo.html<\/strong><\/em> and paste in the dashboard.html<\/strong><\/em> page, this form contains a radio set and an additional button that changes the value of radio set. Here you\u2019ll also learn about button action.<\/p>\n\n\n\n \n\nNow 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\u2019ll understand how they are referenced from UI components.\n\n<\/p>\n\n\n\n \n\nNow run the application and check button functionality.\n\n<\/p>\n\n\n\n Goto Oracle JET Cookbook and navigate to JET table demo page<\/a><\/p>\n\n\n\n Read the recipe carefully and try to understand the code, Here JET table is populated using ArrayDataProvider. Here goes the code for dashboard.html<\/strong><\/em><\/p>\n\n\n\n \n\nand dashboard.js<\/strong><\/em> code goes like this, Here deptArray<\/strong> is passed in ArrayDataProvider<\/strong> to populate data in the JET table.\n\n<\/p>\n\n\n\n \n\nRun application and check\n\n<\/p>\n\n\n\n Goto Oracle JET Cookbook and navigate to data grid demo page<\/a><\/p>\n\n\n\n dashboard.html<\/strong><\/em> file code<\/p>\n\n\n\n dashboard.js<\/strong><\/em> file code, Here you can see how data array used as grid\u2019s data source\n\n<\/p>\n\n\n\n \n\nRun application and check\n\n<\/p>\n\n\n\n I\u2019ll add some more UI Components Demo in this post later, Keep an eye on this page.<\/p>\n\n\n\n Cheers Happy Learning<\/strong><\/p>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/JET-Dashboard-Module.jpg\")
<\/figure><\/div>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/views-and-viewModels.jpg\")
<\/figure><\/div>\n\n\n\noj-input-text (Input Text) Component<\/h3>\n\n\n\n
![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/demo-html-file.jpg\")
<\/figure><\/div>\n\n\n\n<oj-label for=\"text-input\">oj-input-text component<\/oj-label>\n<oj-input-text id=\"text-input\" value=\"{{value}}\"><\/oj-input-text>\n \n <br\/><br\/>\n \n<span class=\"oj-label\">Current component value is: <\/span>\n<span data-bind=\"text: value\"><\/span>\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/demo-js-file.jpg\")
<\/figure><\/div>\n\n\n\n\/*\n * Your dashboard ViewModel code goes here\n *\/\ndefine(['ojs\/ojcore', 'knockout', 'jquery', 'ojs\/ojinputtext'], function (oj, ko, $) {\n function DashboardViewModel() {\n var self = this;\n this.value = ko.observable(\"Green\");\n.\n.\n.\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/Oracle-JET-Input-Text-Demo.jpg\")
<\/figure><\/div>\n\n\n\noj-select-one (Select One Choice) Component<\/h3>\n\n\n\n
<div class=\"oj-hybrid-padding\">\n <h1>Dashboard Content Area<\/h1>\n <div>\n <oj-label for=\"basicSelect\">Select One<\/oj-label>\n \n <oj-select-one id=\"basicSelect\" value=\"{{val}}\" style=\"max-width:20em\">\n <oj-option value=\"IE\">Internet Explorer<\/oj-option>\n <oj-option value=\"FF\">Firefox<\/oj-option>\n <oj-option value=\"CH\">Chrome<\/oj-option>\n <oj-option value=\"OP\">Opera<\/oj-option>\n <oj-option value=\"SA\">Safari<\/oj-option>\n <\/oj-select-one>\n \n <br\/>\n \n <oj-label for=\"curr-value\">Current selected value is<\/oj-label>\n \n <span id=\"curr-value\">\n <oj-bind-text value=\"[[val]]\"><\/oj-bind-text><\/span>\n <\/div>\n<\/div>\n<\/pre>\n\n\n\n\/*\n * Your dashboard ViewModel code goes here\n *\/\ndefine(['ojs\/ojcore', 'knockout', 'jquery', 'ojs\/ojselectcombobox'], function (oj, ko, $) {\n function DashboardViewModel() {\n var self = this;\n this.val = ko.observable(\"CH\");\n.\n.\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/Oracle-JET-SelectOneChoice-Demo.jpg\")
<\/figure><\/div>\n\n\n\noj-radioset (Radio Button Group) Component<\/h3>\n\n\n\n
<div class=\"oj-hybrid-padding\">\n <h1>Dashboard Content Area<\/h1>\n <div id=\"formId\" class=\"oj-form\">\n <oj-label id=\"mainlabelid\">Colors<\/oj-label>\n \n <!-- You need to set the labelled-by attribute\n to make this accessible.\n role=\"radiogroup\" is set for you by oj-radioset. -->\n \n <oj-radioset id=\"radiosetBasicDemoId\" labelled-by=\"mainlabelid\" value=\"{{currentColor}}\">\n <!-- This is an example of how to use oj-bind-for-each, along with oj-bind-text to \n iterate over an array of objects-->\n <oj-bind-for-each data=\"[[colorOptions]]\">\n <template>\n <oj-option id=\"[[$current.data.id]]\" value=\"[[$current.data.value]]\">\n <oj-bind-text value=\"[[$current.data.color]]\"><\/oj-bind-text>\n <\/oj-option>\n <\/template>\n <\/oj-bind-for-each>\n <\/oj-radioset>\n \n <br\/>\n \n <span>Current component value is: <\/span>\n \n <span id=\"curr-value\" data-bind=\"text: currentColor\"><\/span>\n \n <br\/>\n \n <br\/>\n <div id='buttons-container'>\n <oj-button id='inputButton4' on-oj-action='[[setModelCurrentColorToBlue]]'>Set model currentColor to blue<\/oj-button>\n <\/div>\n <\/div>\n<\/div>\n<\/pre>\n\n\n\n\/*\n * Your dashboard ViewModel code goes here\n *\/\ndefine(['ojs\/ojcore', 'knockout', 'jquery', 'ojs\/ojradioset', 'ojs\/ojbutton', 'ojs\/ojlabel'], function (oj, ko, $) {\n function DashboardViewModel() {\n var self = this;\n \/\/ this variable keeps track of the currentColor. \n \/\/ It's a Knockout observable which\n \/\/ means it is a two-way binding.\n self.currentColor = ko.observable(\"red\");\n \n \/\/Array that populates Radio Set\n self.colorOptions = ko.observableArray([\n {id : \"blueopt\", value : \"blue\", color : \"Blue\"},\n {id : \"greenopt\", value : \"green\", color : \"Green\"},\n {id : \"redopt\", value : \"red\", color : \"Red\"},\n {id : \"limeopt\", value : \"lime\", color : \"Lime\"},\n {id : \"aquaopt\", value : \"aqua\", color : \"Aqua\"},]);\n \n \/\/Method that is called on button click\n self.setModelCurrentColorToBlue = function () {\n alert(\"Set model currentColor to blue.\");\n self.currentColor(\"blue\");\n return true;\n }\n.\n.\n.\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/Oracle-JET-Radio-Set-Demo.jpg\")
<\/figure><\/div>\n\n\n\noj-table (JET table) Component<\/h3>\n\n\n\n
<oj-table id='table' aria-label='Departments Table'\n data='[[dataprovider]]'\n selection-mode='{\"row\": \"multiple\", \"column\": \"multiple\"}'\n dnd='{\"reorder\": {\"columns\": \"enabled\"}}'\n scroll-policy='loadMoreOnScroll'\n scroll-policy-options='{\"fetchSize\": 10}'\n columns='[{\"headerText\": \"Department Id\", \n \"field\": \"DepartmentId\",\n \"headerClassName\": \"oj-sm-only-hide\",\n \"className\": \"oj-sm-only-hide\",\n \"resizable\": \"enabled\"},\n {\"headerText\": \"Department Name\", \n \"field\": \"DepartmentName\",\n \"resizable\": \"enabled\"},\n {\"headerText\": \"Location Id\", \n \"field\": \"LocationId\",\n \"headerClassName\": \"oj-sm-only-hide\",\n \"className\": \"oj-sm-only-hide\",\n \"resizable\": \"enabled\"},\n {\"headerText\": \"Manager Id\", \n \"field\": \"ManagerId\",\n \"resizable\": \"enabled\"}]'\n style='width: 100%; height: 300px;'>\n<\/oj-table>\n<\/pre>\n\n\n\n\/*\n * Your dashboard ViewModel code goes here\n *\/\ndefine(['ojs\/ojcore', 'knockout', 'jquery','ojs\/ojarraydataprovider','ojs\/ojknockout','ojs\/ojtable'], \nfunction (oj, ko, $, ArrayDataProvider) {\n function DashboardViewModel() {\n var self = this;\n \n var deptArray = [\n {DepartmentId: 3, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},\n {DepartmentId: 5, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},\n {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},\n {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},\n {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},\n {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},\n {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},\n {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},\n {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},\n {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},\n {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},\n {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},\n {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},\n {DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},\n {DepartmentId: 1009, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},\n {DepartmentId: 1011, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},\n {DepartmentId: 2011, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 3011, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 4011, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},\n {DepartmentId: 5011, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},\n {DepartmentId: 6011, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},\n {DepartmentId: 7011, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},\n {DepartmentId: 8011, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},\n {DepartmentId: 9011, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},\n {DepartmentId: 10011, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},\n {DepartmentId: 11011, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},\n {DepartmentId: 12011, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},\n {DepartmentId: 13011, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},\n {DepartmentId: 14011, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},\n {DepartmentId: 15011, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},\n {DepartmentId: 21022, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},\n {DepartmentId: 22022, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 23022, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},\n {DepartmentId: 24022, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},\n {DepartmentId: 25022, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},\n {DepartmentId: 26022, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},\n {DepartmentId: 27022, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},\n {DepartmentId: 28022, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},\n {DepartmentId: 29022, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},\n {DepartmentId: 310022, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},\n {DepartmentId: 311022, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},\n {DepartmentId: 312022, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},\n {DepartmentId: 313022, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];\n \n self.dataprovider = new ArrayDataProvider(deptArray, {keyAttributes: 'DepartmentId', implicitSort: [{attribute: 'DepartmentId', direction: 'ascending'}]});\n .\n .\n .\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/Oracle-JET-table-demo.jpg\")
<\/figure><\/div>\n\n\n\noj-data-grid (Data Grid) Component<\/h3>\n\n\n\n
<oj-data-grid id=\"datagrid\" \n style=\"width:100%;max-width:234px;height:130px\" \n aria-label=\"Data Grid Cell Based Grid Demo\" \n data=\"[[dataSource]]\">\n<\/oj-data-grid>\n<\/pre>\n\n\n\n
\/*\n * Your dashboard ViewModel code goes here\n *\/\ndefine(['ojs\/ojcore', 'knockout', 'jquery','ojs\/ojknockout','ojs\/ojdatagrid', 'ojs\/ojarraydatagriddatasource'], \nfunction (oj, ko, $, ArrayDataProvider) {\n function DashboardViewModel() {\n var self = this;\n \n var dataArray = [\n ['1', '2', '3'],\n ['4', '5', '6'],\n ['7', '8', '9']\n ];\n self.dataSource = new oj.ArrayDataGridDataSource(dataArray);\n .\n .\n<\/pre>\n\n\n\n![\"Oracle](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/04\/Oracle-JET-data-grid-demo.jpg\")
<\/figure><\/div>\n\n\n\n