Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Jdeveloper 12.1.3. Show all posts
Showing posts with label Jdeveloper 12.1.3. Show all posts

Thursday 18 April 2019

Populate Oracle JET table on top of Oracle ADF BC using REST Web Service

 Previously I have posted about creating REST Web Service from ADF Application Module and in this post, I am going to use the same REST service for populating data in a JET table. Here we'll populate JET table on top of Oracle ADF BC (Business Components).

Here I am taking the same sample application that I have discussed in my first post Getting started with Oracle JET and JDeveloper

The URL of ADF BC based web service is http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department and it returns a list of Departments in nested JSON format



Let’s see the implementation part

Add an oj-table component in the dashboard.html page and define the required number of columns, this web service returns a list of Departments so I have taken 4 columns for Department Id, Department Name, Manager Id, and Location Id

  1. <div class="oj-hybrid-padding">
  2. <h1>Dashboard Content Area</h1>
  3. <div id="div1">
  4. <oj-table id='table' aria-label='Departments Table'
  5. data='[[datasource]]'
  6. selection-mode='{"row": "multiple", "column": "multiple"}'
  7. dnd='{"reorder": {"columns": "enabled"}}'
  8. scroll-policy='loadMoreOnScroll'
  9. scroll-policy-options='{"fetchSize": 10}'
  10. columns='[{"headerText": "Department Id",
  11. "field": "dept_id",
  12. "resizable": "enabled"},
  13. {"headerText": "Department Name",
  14. "field": "dept_name",
  15. "resizable": "enabled"},
  16. {"headerText": "Manager Id",
  17. "field": "mgr_id",
  18. "resizable": "enabled"},
  19. {"headerText": "Location Id",
  20. "field": "loc_id",
  21. "resizable": "enabled"}
  22. ]'
  23. style='width: 100%; height: 400px;'>
  24. </oj-table>
  25. </div>
  26. </div>

Now see the code of dashboard.js, Read comments to understand the javascript code, Here getJSON() method of jQuery is used to call REST Web Service as jQuery is a part of Oracle JET libraries.

  1. /*
  2. * Your dashboard ViewModel code goes here
  3. */
  4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
  5. function (oj, ko, $) {
  6. function DashboardViewModel() {
  7. var self = this;
  8. //Define a Knockout observable array and name it tabData
  9. self.tabData = ko.observableArray();
  10. //Use jQuery method to call REST Web Service
  11. $.getJSON("http://127.0.0.1:7101/RestWebServApp-RESTWebService-context-root/rest/Jdev12.2.1/Department").
  12. then(function (departments) {
  13. //JSON response is nested that's why 'items' is used to access records
  14. $.each(departments.items, function () {
  15. //Push data in Observable array
  16. self.tabData.push( {
  17. dept_id : this.DepartmentId,
  18. dept_name : this.DepartmentName,
  19. mgr_id : this.ManagerId,
  20. loc_id : this.LocationId
  21. });
  22. });
  23. });
  24. //Pass observable array in utility class to show data in table
  25. self.datasource = new oj.ArrayTableDataSource(self.tabData,
  26. {
  27. idAttribute : 'dept_id'
  28. });
  29. .
  30. .
  31. .

tabData is a knockout observable array that is defined to hold returned value and you can see that
self.tabData.push is used to push web service data into this array and at last a JET utility class
ArrayTableDataSource is used to convert this observable array into tabular format data.

Now run the application and you can see that a JET table is populated with Departments data



Cheers 🙂 Happy Learning

Tuesday 9 April 2019

Working with Oracle JET Chart Component

 In this post, we'll see how to use Oracle JET Chart (oj-chart) Component and its various properties, Here I am using Oracle JET with JDeveloper 12.1.3. To learn more about using JET with JDeveloper refer my previous post

Goto Oracle JET Cookbook and read the whole recipe of Bar Chart, Here you'll learn about basic properties of a chart

Now open the dashboard.html file from your project in JDeveloper editor and paste this code

  1. <div class="oj-hybrid-padding">
  2. <h1>Dashboard Content Area</h1>
  3. <div>
  4. <oj-chart
  5. id="barChart"
  6. type="bar"
  7. orientation="[[orientationValue]]"
  8. stack="[[stackValue]]"
  9. series="[[barSeriesValue]]"
  10. groups="[[barGroupsValue]]"
  11. animation-on-display="auto"
  12. animation-on-data-change="auto"
  13. hover-behavior="dim"
  14. style="max-width:650px;width:100%;height:350px;">
  15. </oj-chart>
  16. </div>
  17. </div>

Here you can see orientation, stack, series, groups values are referenced from different variables and these variables are used in the dashboard.js file to supply values to the chart components.

  1. /*
  2. * Your dashboard ViewModel code goes here
  3. */
  4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojchart'],
  5. function (oj, ko, $) {
  6. function DashboardViewModel() {
  7. var self = this;
  8. /*Chart Properties*/
  9. self.stackValue = ko.observable('off');
  10. self.orientationValue = ko.observable('vertical');
  11. /* chart data */
  12. var barSeries = [
  13. {name : "Finance", items : [42000, 55000]},
  14. {name : "Purchase", items : [55000, 70000]},
  15. {name : "Service", items : [36000, 50000]},
  16. {name : "Administration", items : [28000, 65000]},
  17. {name : "HR", items : [25000, 60000]}
  18. ];
  19. var barGroups = ["Average Salary", "Max Salary"];
  20. self.barSeriesValue = ko.observableArray(barSeries);
  21. self.barGroupsValue = ko.observableArray(barGroups);
  22. .
  23. .
  24. .

Here you can see that an array is used to populate data in the bar chart and all variables are defined with appropriate values, You can see that we have two groups here for each Department and chart orientation is vertical.

Now run and check how it looks on the browser



Try changing stackValue and orientationValue attribute and check what happens?

  1. /*Chart Properties*/
  2. self.stackValue = ko.observable('on');
  3. self.orientationValue = ko.observable('horizontal');

and bar chart looks like this


Now I am adding a choice list that shows different chart type and on the selection of specific type, the chart should change so for this requirement I am adding an oj-select-one component on the page and referencing chart's type attribute to its value

This is the complete code of the dashboard.html

  1. <div class="oj-hybrid-padding">
  2. <h1>Dashboard Content Area</h1>
  3. <div>
  4. <oj-label for="basicSelect">Select Chart Type</oj-label>
  5. <oj-select-one id="basicSelect" value="{{chartType}}" style="max-width:20em">
  6. <oj-option value="bar">Bar</oj-option>
  7. <oj-option value="pie">Pie</oj-option>
  8. <oj-option value="line">Line</oj-option>
  9. <oj-option value="area">Area</oj-option>
  10. </oj-select-one>
  11. <oj-chart
  12. id="barChart"
  13. type="[[chartType]]"
  14. orientation="[[orientationValue]]"
  15. stack="[[stackValue]]"
  16. series="[[barSeriesValue]]"
  17. groups="[[barGroupsValue]]"
  18. animation-on-display="auto"
  19. animation-on-data-change="auto"
  20. hover-behavior="dim"
  21. style="max-width:650px;width:100%;height:350px;">
  22. </oj-chart>
  23. </div>
  24. </div>

and the dashboard.js file looks like this

  1. /*
  2. * Your dashboard ViewModel code goes here
  3. */
  4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojchart','ojs/ojselectcombobox'],
  5. function (oj, ko, $) {
  6. function DashboardViewModel() {
  7. var self = this;
  8. //Setting choice list attribute
  9. this.chartType = ko.observable("bar");
  10. /*Chart Properties*/
  11. self.stackValue = ko.observable('off');
  12. self.orientationValue = ko.observable('vertical');
  13. /* chart data */
  14. var barSeries = [
  15. {name : "Finance", items : [42000, 55000]},
  16. {name : "Purchase", items : [55000, 70000]},
  17. {name : "Service", items : [36000, 50000]},
  18. {name : "Administration", items : [28000, 65000]},
  19. {name : "HR", items : [25000, 60000]}
  20. ];
  21. var barGroups = ["Average Salary", "Max Salary"];
  22. self.barSeriesValue = ko.observableArray(barSeries);
  23. self.barGroupsValue = ko.observableArray(barGroups);
  24. .
  25. .
  26. .

Now run and try changing chart type from the choice list

Oracle JET Line Chart



Oracle JET Area Chart



You can download the Sample Oracle JET Application here, its approx 13mb as JET library filed are included in the project

Cheers 🙂 Happy Learning