Personalizar tabelas de rastreamento

A guia de rastreamento no espaço de trabalho do AEM Forms é usada para exibir os detalhes de instâncias de processo nas quais o usuário conectado está envolvido. Para exibir as tabelas de rastreamento, primeiro selecione um nome de processo no painel esquerdo para ver sua lista de instâncias no painel do meio. Selecione uma instância de processo para ver uma tabela de tarefas geradas por essa instância no painel direito. Por padrão, as colunas da tabela exibem os seguintes atributos de tarefa (o atributo correspondente no modelo de tarefa é fornecido entre parênteses):

  • ID ( taskId)
  • Nome ( stepName)
  • Instruções ( instructions)
  • Ação selecionada ( selectedRoute)
  • Hora de criação ( createTime)
  • Hora de Término ( completeTime)
  • Proprietário ( currentAssignment.queueOwner)

Os atributos restantes no modelo de tarefa disponível para exibição na tabela de tarefas são:

actionInstanceId

isOpenFullScreen

reminderCount

classOfTask

isOwner

routeList

consultGroupId

isRouteSelectionRequired

savedFormCount

contentType

isShowAttachments

serializedImageTicket

createTime

isStartTask

serviceName

creationId

isVisible

serviceTitle

currentAssignment

nextReminder

showACLActions

prazo

numForms

showDirectActions

descrição

numFormsToBeSaved

status

displayName

outOfOfficeUserId

summaryUrl

forwardGroupId

outOfOfficeUserName

supportedSave

isApprovalUI

prioridade

taskACL

isCustomUI

processInstanceId

taskFormType

isDefaultImage

processInstanceStatus

taskUserInfo

isLocked

processVariables

isMustOpenToComplete

readerSubmitOptions

Para as seguintes personalizações na tabela de tarefas, você precisa fazer alterações semânticas no código-fonte. Consulte Introdução à Personalização do espaço de trabalho do AEM Forms para saber como fazer alterações semânticas usando o SDK do espaço de trabalho e criar um pacote minificado a partir da origem alterada.

Alteração de colunas da tabela e sua ordem

  1. Para modificar os atributos de tarefa exibidos na tabela e sua ordem, configure o arquivo /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>
    

Classificação de uma tabela de rastreamento

Para classificar a tabela da lista de tarefas ao clicar no cabeçalho da coluna:

  1. Registrar um manipulador de cliques para .fixedTaskTableHeader th no arquivo js/runtime/views/processinstancehistory.js.

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

    No manipulador, chame o onTaskTableHeaderClick função de js/runtime/util/history.js.

    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. Expor o TaskTableHeaderClick método em js/runtime/util/history.js.

    O método localiza o atributo de tarefa do evento click, classifica a lista de tarefas nesse atributo e renderiza a tabela de tarefa com a lista de tarefas classificada.

    A classificação é feita usando a função de classificação Backbone na coleção de listas de tarefas, fornecendo uma função de comparação.

        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();
        };
    

Nesta página