Personalizar tablas de seguimiento

La ficha 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 realizar la vista de las tablas de seguimiento, primero seleccione un nombre de proceso en el panel izquierdo para ver su lista de instancias en el panel medio. Seleccione una instancia de proceso para ver una tabla de tareas generadas por esta instancia en el panel derecho. De forma predeterminada, las columnas de la tabla muestran los atributos de tarea siguientes (el atributo correspondiente del modelo de tarea se indica entre paréntesis):

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

Los atributos restantes del modelo de tarea disponibles para su visualización en la tabla de tareas son:

actionInstanceId

isOpenFullScreen

recordatorioCount

classOfTask

isOwner

routeList

queryGroupId

isRouteSelectionRequired

savedFormCount

contentType

isShowAttachments

serializedImageTicket

createTime

isStartTask

serviceName

creatingId

isVisible

serviceTitle

currentAssignment

nextReminder

showACLActions

fecha límite

numForms

showDirectActions

Descripción

numFormsToBeSaved

estado

displayName

outOfOfficeUserId

summaryUrl

forwardGroupId

outOfOfficeUserName

supportSave

isApprovalUI

priority

taskACL

isCustomUI

processInstanceId

taskFormType

isDefaultImage

processInstanceStatus

taskUserInfo

isLocked

processVariables

isMustOpenToComplete

readerSubmitOptions

Para las siguientes personalizaciones en la tabla de tarea, 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 puede realizar cambios semánticos mediante el SDK de espacio de trabajo y crear un paquete reducido 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>
    

Ordenar una tabla de seguimiento

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

  1. Registre 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 de js/runtime/util/history.js.

    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. Exponga el método TaskTableHeaderClick en js/runtime/util/history.js.

    El método busca el atributo de tarea desde el 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 red troncal 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();
        };
    

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now