Creación de una Aplicación JET de EnterpriseOne Basada en una Plantilla

1. Vaya a la carpeta e1pages y copie una de las carpetas de ejemplo (junto con los tres archivos contenidos en la carpeta) a una nueva de nombre relevante.

   Para este ejemplo, copie P54HS260_NumberOfReportableCases y cambie el nombre a P13560_TotalCost.

2. Actualice el proyecto JDeveloper y abra una nueva carpeta. Solo tendrá que modificar E1AISCalls.js si está siguiendo la plantilla.

3. Cambie self.componentID. Este valor se utiliza para la persistencia de las selecciones de menú y filtro realizadas por el usuario, de forma que la próxima vez que ejecute la aplicación JET, se recuperen los parámetros correspondientes. Este valor debe ser una cadena única de <= 20 caracteres.

   Para este ejemplo, utilice P13560_TotalCost.

4. Cambie self.objectName para que sea el ID de aplicación origen de los datos extraídos por el gráfico. Si no hay ninguna aplicación asociada, ésta puede ser una tabla o vista lógica.

   Para este ejemplo, utilice P13560.

5. Cambie self.formName a la pantalla de la aplicación origen de los datos extraídos por el gráfico. Si objectName es una tabla o una vista, esto se debe dejar en blanco.

   Para este ejemplo, utilice W13560A.

6. self.labelObjectName es una referencia a la pantalla externa de EnterpriseOne utilizada para la obtención de las etiquetas traducidas. a. Esto no se utilizará en este ejemplo y debe dejarse en blanco.

   self.labelObjectName="";

   >
7. Defina self.isDataRequest. Si este valor es verdadero y self.objectName es una aplicación, los datos se recuperarán de la vista lógica asociada con la aplicación. Recuperar los datos desde la vista lógica es un proceso más rápido que ejecutar la aplicación, además de poder usar la agregación, lo que aumenta el rendimiento de forma significativa. Usar el valor verdadero omitirá cualquier lógica de regla de evento en la aplicación, por lo que se debe tener cuidado, a fin de garantizar que los datos devueltos para representar el gráfico no dependen de la regla de evento.

   Para este ejemplo, utilice true.

8. Defina self.hasVersions. Esto debe ser true si la aplicación tiene opciones de proceso. También es importante al utilizar consultas, ya que las guardadas en EnterpriseOne están vinculadas a una versión específica de aplicación.

   Para este ejemplo, utilice true.

9. Defina self.stackValue como ko.observable('off') o ko.observable('on'). Actívelo (on) si el gráfico es de barras apiladas.

   Para este ejemplo, utilice off.

10. Defina self.chartType a ko.observable('bar'), ko.observable('line') o ko.observable('pie').

    Para este ejemplo, utilice bar.

11. Defina self.orientationValue a ko.observable('horizontal') o ko.observable('vertical').

    Para este ejemplo, utilice horizontal para crear un gráfico de barras horizontales.

12. Mueva setTitleFieldText a la parte inferior de la función initPage. Nos ocuparemos del título al final.
13. self.xTitle y self.yTitle se utilizan como etiquetas de los ejes X e Y. Para este ejemplo. deje xTitle en blanco y defina yTitle como Cost:

    self.xTitle = ko.observable(‘’);
    self.yTitle = ko.observable('Cost');

14. Deje el código self.xAxis y self.yAxis, y elimine el resto del código en initPage excepto setTitleFieldText.

Este gráfico tiene un campo de menú 'Group By' que también aparece en el título para sustitución.

1. Debe definir los valores para selección:

       self.selectValues = ko.observableArray([{value : 'prodFamily', label : 'Product Family'},
                                       			   {value : 'prodModel', label : 'Product Model'}]);
   

2. Defina un controlador de cambio para la lista desplegable Group By:

       self.groupByChangeHandler = function (context, valueParam) 
       {
           if (valueParam.option == "value") 
           {
               if (self.currentGroupByValue != valueParam.value[0]) 
               {
                   var drawer = self.offcanvasMap()["start"];
                   drawer.launcherId = "start";
                   drawer.displayMode = "overlay";
   
                   // if it's the active offcanvas, close it
                   if (drawer !== self._activeOffcanvas) 
                   {
                       self.savedGroupByValue(valueParam.value[0]);
                       self.getData();
                   }
   
               }
           }
       };
   

3. Defina el valor por defecto y los valores guardados para el Group By:

       self.savedGroupByValue = ko.observableArray(["prodModel"]);
       self.currentGroupByValue = 'prodModel'; 
   

4. Añada Group By al menú:

   setMenuFieldId(self, "groupByValue", "Group by", "ojSelect", self.savedGroupByValue, null, null, self.selectValues);

5. Defina el título y añada Group By al final:

       setTitleFieldText("title1", "Total Cost by");
       setTitleFieldInput(self, "dropDownValue", "ojSelect", self.savedGroupByValue, null, null, self.selectValues, "groupByChangeHandler", "150px");
   

Tras los cambios, el código de initPage debería ofrecer este aspecto:

function initPage(ko, self)
{                    
    self.componentId = "P13560_TCOST";
    
    self.objectName = "P13560";
    self.formName = "W13560A";
        
    self.labelObjectName = "";
    
    self.isDataRequest = true;
    
    self.hasVersions = true;
       
    self.stackValue = ko.observable('off');
    self.orientationValue = ko.observable('horizontal');
    self.chartType = ko.observable('bar'); 
    
    self.xTitle = ko.observable('');
    self.yTitle = ko.observable('Cost');
    
    /* chart axes */
    self.xAxis = ko.pureComputed(function ()
    {
        return {
            title: self.xTitle()
        };
    });

    self.yAxis = ko.pureComputed(function ()
    {
        return {
            title: self.yTitle()
        };
    });                  
        
    self.selectValues = ko.observableArray([{value : 'prodFamily', label : 'Product Family'},
                                            {value : 'prodModel', label : 'Product Model'}]);
                                            
    self.groupByChangeHandler = function (context, valueParam) 
    {
        if (valueParam.option == "value") 
        {
            if (self.currentGroupByValue != valueParam.value[0]) 
            {
                var drawer = self.offcanvasMap()["start"];
                drawer.launcherId = "start";
                drawer.displayMode = "overlay";

                // if it's the active offcanvas, close it
                if (drawer !== self._activeOffcanvas) 
                {
                    self.savedGroupByValue(valueParam.value[0]);
                    self.getData();
                }

            }
        }
    };

    self.savedGroupByValue = ko.observableArray(["prodModel"]);
    self.currentGroupByValue = 'prodModel';
    
    setMenuFieldId(self, "groupByValue", "Group by", "ojSelect", self.savedGroupByValue, null, null, self.selectValues);        
    setTitleFieldText("title1", "Total Cost by");      
    setTitleFieldInput(self, "dropDownValue", "ojSelect", self.savedGroupByValue, null, null, self.selectValues, "groupByChangeHandler", "150px");
}

1. Borre el contenido de la función jetTranslations, ya que las etiquetas están codificadas para este ejemplo, pero no las suprima.
2. Suprima la función isEmpty, que no se utiliza en este ejemplo.

1. Cambie la función getSafetyStatisticsForReportableCasesData a getTotalCostData en la llamada getE1Data y la definición de función situada justo debajo.
2. getTotalCostData crea la consulta y llama a consumeData a fin de preparar los datos para el gráfico. Primero, el Group By está definido en función de la selección de la lista desplegable. Ya que es un petición de datos, la vista (V13550) se especifica para la llamada AIS. La consulta sumará la columna AmountActual en F4801, que forma parte de la vista. Los criterios de filtro proceden de la consulta seleccionada en el menú así como de cualquier otra consulta definida en Query Builder.
3. El código debería presentar este aspecto:

   
   function getTotalCostData(self, callback) {
       var groupingCol = null;
   
       /* group by product model or product family */
       if (self.savedGroupByValue() == 'prodModel') {
           groupingCol = "F4801T.PRODM";
       }
       else if (self.savedGroupByValue() == 'prodFamily') {
           groupingCol = "F4801T.PRODF";
       }
   
       var savedQuery = self.savedQueryValue;
       if (savedQuery == 'AllRecords') {
           savedQuery = '';
       }
   
       var input = {
           aliasNaming : true, 
           outputType : "GRID_DATA", 
           findOnEntry : "TRUE", 
           maxPageSize : "LocalJetVariables.maxPageSize", 
           queryObjectName : savedQuery, 
           targetName : "V13550", 
           targetType : "view", 
           dataServiceType : "AGGREGATION", 
           aggregation :  {
               aggregations : [{column : "F4801.AMTA", aggregation : "SUM"}], 
               groupBy : [{column : groupingCol}], 
               orderBy : [{column : groupingCol, direction : "ASC"}], 
               /* currency trigger by company */
               currency :  {
                   type : "CO", keyCols : ["F4801.CO"], currencyCols : ["F4801.AMTA"]
               }
           }
       };
   
       if (self.adhocQuery) {
           input.query = self.adhocQuery;
       }
   
       self.currentGroupByValue = self.savedGroupByValue();
   
       /* call AIS data service based on the above defined input */
       callAISService(input, DATA_SERVICE, function (response) {
           // pass back error from AIS call
           if (response.message) {
               callback(false, response.message);
           }
           else {
               var dataArray = response.ds_V13550.output;
               if (dataArray.length > 0) {
                   consumeData(self, response, function () {
                       // pass back false for noData            
                       callback(false);
                   });
               }
               else {
                   // pass back true for noData   
                   callback(true);
               }
           }
       });
   }
   
   

4. consumeData toma la respuesta, que es la suma de todos los campos AmountActual basados en los criterios de filtro agrupados por familia o modelo de producto, y carga self.seriesValue y self.groupsValue, que se utilizan a su vez para trazar el gráfico. También obtiene las descripciones UDC de cada grupo por clave, para su respectiva visualización en la etiqueta.

   
   function consumeData(self, response, callback) {
       var dataSum = {
           'groups' : [], 'series' : []
       };
   
       var dataArray = response.ds_V13550.output;
       var arrayLength = dataArray.length;
       var desc = null;
       var groupBy = null;
   
       /* Retrieve UDC descriptions */
       if (self.savedGroupByValue() == 'prodFamily') {
           /* If Product family, retrieve descriptions from UDC 17/PA */
           groupBy = "F4801T.PRODF";
           var udcArray = [];
           var sy = '17';
           var rt = 'PA';
       }
       else if (self.savedGroupByValue() == 'prodModel') {
           /* If Product model, retrieve descriptions from UDC 17/PM */
           groupBy = "F4801T.PRODM";
           var udcArray = [];
           var sy = '17';
           var rt = 'PM';
       }
   
       for (i = 0;i < arrayLength;i++) {
           if (dataArray[i].groupBy[groupBy] == "") {
               dataArray[i].groupBy[groupBy] = " ";
           }
           setUDCArray(udcArray, sy, rt, dataArray[i].groupBy[groupBy]);
       }
   
       fetchUDCDescriptions(udcArray, false, function (udcDescMap) {
           dataSum['groups'][0] = ' ';
           for (i = 0;i < arrayLength;i++) {
               var desc = dataArray[i].groupBy[groupBy] + " - " + udcDescMap[dataArray[i].groupBy[groupBy]].desc;
               var total = dataArray[i]["F4801.AMTA_SUM"];
               var items = [{value : total, label : desc, labelPosition : 'none', categories : [desc]}];
               dataSum['series'].push( {
                   'name' : desc, 'items' : items
               });
           }
           self.seriesValue(dataSum['series']);
           self.groupsValue(dataSum['groups']);
   
           callback();
       });
   }
   
   

5. En este punto, la aplicación está preparada para ejecutarse, tras la apertura de home.html en un explorador. Cuando la aplicación se ejecute por primera vez, seleccionará la primera consulta en P13560 disponible para el usuario. Si no se ha definido ninguna consulta, verá el mensaje “Query definition is required“ (la definición de consulta es necesaria).