En este post integraremos la actual versión de Oracle JET 7.1 en Oracle APEX y usaremos AJAX para cargar la información de forma dinámica.
Demo
Descarga App: GDrive
Para este ejemplo usaremos el control Gantt del CookBook de JET
En la hoja creamos una variable que será nuestro enlace de la data.
Agregamos la referencia de CSS
En el page load creamos dos acciones dinámicas, en una cargamos las librerías de JET 7.1
Y en otra acción dinámica el código del ViewModel, el código fue extraído de la guía del cookbook de Oracle JET.
Aquí se han modificado los siguientes puntos:
-- La función recibe un parámetro que es la data para usar en el Gantt
-- Para los path de las images se estan usando link de images online
Código ViewModel
Creamos una región estática y agregamos el CSS de la región Gantt
Creamos un botón y lo definimos con una acción dinámica que ejecutara un JavaScript, la cual es la llamada AJAX
Creamos nuestro AjaxCallback
Por motivos didáctivos estoy usando unos select dentro de un for para generar data de forma dinámica.
En el network la llamada ajax debe tener la siguiente estructura, la misma del ejemplo del cookbook.
Y finalmente el resultado
Demo
Descarga App: GDrive
Para este ejemplo usaremos el control Gantt del CookBook de JET
En la hoja creamos una variable que será nuestro enlace de la data.
Agregamos la referencia de CSS
#JET_CSS_DIRECTORY#/alta/oj-alta-notag-min.css
Agregamos la librería de requireJS
APEX_JAVASCRIPT.add_requirejs();
En el page load creamos dos acciones dinámicas, en una cargamos las librerías de JET 7.1
requirejs.config({
"baseUrl": "https://static.oracle.com/cdn/jet/v7.1.0",
// Path mappings for the logical module names
paths: {
'knockout': '3rdparty/knockout/knockout-3.5.0',
'jquery': '3rdparty/jquery/jquery-3.4.1.min',
'jqueryui-amd': '3rdparty/jquery/jqueryui-amd-1.12.1.min',
'promise': '3rdparty/es6-promise/es6-promise.min',
'hammerjs': '3rdparty/hammer/hammer-2.0.8.min',
'ojdnd': '3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
'ojs': 'default/js/min',
'ojL10n': 'default/js/ojL10n',
'ojtranslations': 'default/js/resources',
'text': '3rdparty/require/text',
'signals': '3rdparty/js-signals/signals.min',
'customElements': '3rdparty/webcomponents/custom-elements.min',
'proj4': '3rdparty/proj4js/dist/proj4',
'css': '3rdparty/require-css/css.min',
'touchr': '3rdparty/touchr/touchr'
},
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
}
});
Y en otra acción dinámica el código del ViewModel, el código fue extraído de la guía del cookbook de Oracle JET.
Aquí se han modificado los siguientes puntos:
function ViewModel(dataArray)
-- El construcctor recibe el parametro de la data.
this.dataProvider = new ArrayDataProvider(dataArray, {keyAttributes: 'id'});
-- Para los path de las images se estan usando link de images online
this.rowLabelImagePath = { 'Flag1' ....-- dataArray se inicializa como:
dataArray = ko.observableArray([]);
Código ViewModel
require(['knockout', 'ojs/ojbootstrap', 'ojs/ojarraydataprovider', 'ojs/ojknockout', 'ojs/ojgantt'], function(ko, Bootstrap, ArrayDataProvider) { function ViewModel(dataArray) { this.dataProvider = new ArrayDataProvider(dataArray, {keyAttributes: 'id'}); this.projectStartDate = new Date("Jan 1, 2019"); this.projectEndDate = new Date("Dec 31, 2019"); this.currentDateString = "Apr 15, 2019"; this.currentDate = new Date(this.currentDateString); // set viewport to center around the reference object var month = 1000 * 60 * 60 * 24 * 30; this.viewportStart = new Date(Math.max(this.projectStartDate.getTime(), this.currentDate.getTime() - 3*month)); this.viewportEnd = new Date(Math.min(this.projectEndDate.getTime(), this.currentDate.getTime() + 3*month)); // Helper function to get appropriate row label image x position depending on document reading direction this.getRowImageX = function() { var dir = document.documentElement.getAttribute("dir"); return dir === 'ltr' ? '0' : '0'; }; // Helper function to get appropriate row label text x position depending on document reading direction this.getRowTextX = function() { var dir = document.documentElement.getAttribute("dir"); return dir === 'ltr' ? '30' : '25'; }; this.getRowTextAnchor = function() { var dir = document.documentElement.getAttribute("dir"); var userAgent = navigator.userAgent.toLowerCase(); var isIE = userAgent.indexOf('trident') != -1 || userAgent.indexOf('msie') != -1 || userAgent.indexOf('edge') != -1; // Unlike other browsers, IE11 and Edge treats left side of svg text as start in RTL, // so set text-anchor to end to achieve consistent behavior return dir === 'rtl' && isIE ? 'end' : 'start'; }; this.rowLabelImagePath = { 'Flag1': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//pe.png', 'Flag2': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//pw.png', 'Flag3': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//aq.png', 'Flag4': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//bg.png', 'Flag5': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//bl.png', 'Flag6': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//ch.png', 'Flag7': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//es.png', 'Flag8': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//gg.png', 'Flag9': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//id.png', 'Flag10': 'https://raw.githubusercontent.com/stefangabos/world_countries/master/flags/24x24//lt.png', }; } Bootstrap.whenDocumentReady().then( function() { dataArray = ko.observableArray([]); ko.applyBindings(new ViewModel(dataArray), document.getElementById('gantt')); } ); } );
Creamos una región estática y agregamos el CSS de la región Gantt
<div id="componentDemoContent" style="width: 1px; min-width: 100%;"> <oj-gantt id="gantt" axis-position="bottom" start="[[projectStartDate.toISOString()]]" end="[[projectEndDate.toISOString()]]" gridlines.horizontal="visible" gridlines.vertical="visible" major-axis.scale="months" major-axis.zoom-order='["quarters", "months", "weeks", "days"]' minor-axis.scale="weeks" minor-axis.zoom-order='["quarters", "months", "weeks", "days"]' row-axis.rendered="on" selection-mode="single" reference-objects='[[[{"value": currentDate.toISOString()}]]]' viewport-start="[[viewportStart.toISOString()]]" viewport-end="[[viewportEnd.toISOString()]]" task-data="[[dataProvider]]" :aria-label='[["Gantt Chart. Current date is " + currentDateString]]' style="width:100%;height:500px"> <template slot="rowTemplate" data-oj-as="row"> <oj-gantt-row label="[[row.id]]"> </oj-gantt-row> </template> <template slot="taskTemplate" data-oj-as="task"> <oj-gantt-task row-id="[[task.data.resource]]" start="[[task.data.begin]]" end="[[task.data.finish]]" label="[[task.data.name]]"> </oj-gantt-task> </template> <template slot="rowAxisLabelTemplate" data-oj-as="rowAxisLabel"> <svg style="overflow:visible"> <g> <image :xlink:href='[[rowLabelImagePath[rowAxisLabel.rowData.id.replace(" ", "")]]]' xlink:href="" :x="[[getRowImageX()]]" width="24" height="24"> </image> <text :x="[[getRowTextX()]]" y="16" :text-anchor="[[getRowTextAnchor()]]"> <oj-bind-text value="[[rowAxisLabel.rowData.label]]"></oj-bind-text> </text> </g> </svg> </template> </oj-gantt> </div>
Creamos un botón y lo definimos con una acción dinámica que ejecutara un JavaScript, la cual es la llamada AJAX
apex.server.process("LOAD_DATA", { }, { success: function(pData) { console.log(pData); dataArray(pData); } } ); // apex process
Creamos nuestro AjaxCallback
declare l_begin_date date; l_end_date date; begin apex_json.open_array(); -- for generate random data for i in 1..20 loop -- tasks 1 select TO_DATE(TRUNC(DBMS_RANDOM.VALUE(TO_CHAR(DATE '2019-01-01','J'),TO_CHAR(DATE '2019-12-31','J'))),'J' ) random_date into l_begin_date from dual; select TO_DATE(TRUNC(DBMS_RANDOM.VALUE(TO_CHAR(l_begin_date,'J'),TO_CHAR(DATE '2019-12-31','J'))),'J' ) random_date into l_end_date from dual; apex_json.open_object; apex_json.write('id', 'task1-'||i); apex_json.write('begin', l_begin_date ); apex_json.write('finish', l_end_date); apex_json.write('name', 'Label 1-'||i); apex_json.write('resource', 'Flag'||i); apex_json.close_object; -- tasks 2 select TO_DATE(TRUNC(DBMS_RANDOM.VALUE(TO_CHAR(DATE '2019-01-01','J'),TO_CHAR(DATE '2019-12-31','J'))),'J' ) random_date into l_begin_date from dual; select TO_DATE(TRUNC(DBMS_RANDOM.VALUE(TO_CHAR(l_begin_date,'J'),TO_CHAR(DATE '2019-12-31','J'))),'J' ) random_date into l_end_date from dual; apex_json.open_object; apex_json.write('id', 'task1-'||i); apex_json.write('begin', l_begin_date ); apex_json.write('finish', l_end_date); apex_json.write('name', 'Label 1-'||i); apex_json.write('resource', 'Flag'||i); apex_json.close_object; end loop; apex_json.close_array(); end;
En el network la llamada ajax debe tener la siguiente estructura, la misma del ejemplo del cookbook.
Y finalmente el resultado
