Personalización de las tablas de seguimiento

La pestaña de seguimiento del espacio de trabajo de AEM Forms se utiliza para mostrar los detalles de las instancias de proceso en las que participa el usuario que ha iniciado sesión. Para ver las tablas de seguimiento, seleccione primero un nombre de proceso en el panel izquierdo para ver su lista de instancias en el panel central. Seleccione una instancia de proceso para ver una tabla de tareas generada por esta instancia en el panel derecho. De forma predeterminada, las columnas de la tabla muestran los siguientes atributos de tarea (el atributo correspondiente del modelo de tarea se proporciona entre paréntesis):

• ID ( taskId)
• Nombre ( stepName)
• Instrucciones ( instructions)
• Acción seleccionada ( selectedRoute)
• Hora de creación ( createTime)
• Hora de finalización ( completeTime)
• Propietario ( currentAssignment.queueOwner)

Los atributos restantes del modelo de tareas disponibles para mostrar en la tabla de tareas son:

Para las siguientes personalizaciones en la tabla de tareas, debe realizar cambios semánticos en el código fuente. Consulte Introducción a la personalización del espacio de trabajo de AEM Forms para obtener información sobre cómo realizar cambios semánticos mediante el SDK de workspace y crear un paquete minificado a partir del origen modificado.

Cambio de las columnas de la tabla y su orden

1. Para modificar los atributos de tarea mostrados en la tabla y su orden, configure el archivo /ws/js/runtime/templates/processinstancehistory.html :

   <table>
       <thead>
           <tr>
               <!-- put the column headings in order here, for example-->
               <th><%= $.t('history.fixedTaskTableHeader.taskName')%></th>
               <th><%= $.t('history.fixedTaskTableHeader.taskInstructions')%></th>
               <th><%= $.t('history.fixedTaskTableHeader.taskRoute')%></th>
               <th><%= $.t('history.fixedTaskTableHeader.taskCreateTime')%></th>
               <th><%= $.t('history.fixedTaskTableHeader.taskCompleteTime')%></th>
           </tr>
       </thead>
   </table>
   

   <table>
       <tbody>
           <%_.each(obj, function(task){%>
           <tr>
               <!-- Put the task attributes in the order of headings, for example -->
               <td><%= task.stepName %></td>
               <td><%= task.instructions %></td>
               <td><%= !task.selectedRoute?'':(task.selectedRoute=='null'?'Default':task.selectedRoute) %></td>
               <td><%= task.createTime?task.formattedCreateTime:'' %></td>
               <td><%= task.completeTime? task.formattedCompleteTime:'' %></td>
           </tr>
           <%});%>
       </tbody>
   </table>
   

Clasificación de una tabla de seguimiento

Para ordenar la tabla de la lista de tareas al hacer clic en el encabezado de columna:

1. Registrar un controlador de clics para .fixedTaskTableHeader th en el archivo js/runtime/views/processinstancehistory.js.

   events: {
       //other handlers
       "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
       //other handlers
   }
   

   En el controlador, invoque la función onTaskTableHeaderClick función de js/runtime/util/history.js.

   onTaskTableHeaderClick: function (event) {
           history.onTaskTableHeaderClick(event);
   }
   

2. Exponer el TaskTableHeaderClick método en js/runtime/util/history.js.

   El método encuentra el atributo de tarea del evento de clic, ordena la lista de tareas de ese atributo y procesa la tabla de tareas con la lista de tareas ordenada.

   La ordenación se realiza mediante la función de ordenación de la columna vertebral de la colección de listas de tareas, proporcionando una función de comparación.

       return {
           //other methods
           onTaskTableHeaderClick  : onTaskTableHeaderClick,
           //other methods
       };
   

   onTaskTableHeaderClick = function (event) {
           var target = $(event.target),
            comparator,
               attribute;
           if(target.hasClass('taskName')){
            attribute = 'stepName';
           } else if(target.hasClass('taskInstructions')){
               attribute = 'instructions';
           } else if(target.hasClass('taskRoute')){
               attribute = 'selectedRoute';
           } else if(target.hasClass('taskCreateTime')){
               attribute = 'createTime';
           } else if(target.hasClass('taskCompleteTime')){
               attribute = 'completeTime';
           }
           taskList.comparator = function (task) {
            return task.get(attribute);
           };
           taskList.sort();
           render();
       };
   

Recursos de Business.Adobe.com

Auto Form Fill Customer Communications Content Intelligence Theme Editor Document Generation Digital Signage