Show Menu
TÓPICOS×

Personalizar tabelas de rastreamento

A guia de rastreamento na área de trabalho do AEM Forms é usada para exibir os detalhes das instâncias de processo nas quais o usuário conectado está envolvido. Para visualização das 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 do processo para ver uma tabela de tarefas gerada 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 )
  • Tempo de conclusão ( completeTime )
  • Proprietário ( currentAssignment.queueOwner )
Os atributos restantes no modelo de tarefa disponíveis para exibição na tabela de tarefa são:
actionInstanceId
isOpenFullScreen
memoryCount
classOfTask
isOwner
routeList
queryGroupId
isRouteSelectionRequired
savedFormCount
contentType
isShowAttachments
serializedImageTicket
createTime
isStartTask
serviceName
createId
isVisible
serviceTitle
currentAssignment
nextLembrete
showACLActions
prazo
numForms
showDirectActions
descrição
numFormsToBeSaved
status
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportedSave
isApprovalUI
priority
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
taskUserInfo
isLocked
processVariables
isMustOpenToComplete
readerSubmitOptions
Para as seguintes personalizações na tabela tarefa, é necessário fazer alterações semânticas no código-fonte. Consulte Introdução à personalização da área de trabalho do AEM Forms para saber como fazer alterações semânticas usando o SDK da área de trabalho e criar um pacote minified a partir da fonte alterada.

Alteração das 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 de lista de tarefa ao clicar no cabeçalho da coluna:
  1. Registre um manipulador de cliques para .fixedTaskTableHeader th o no arquivo js/runtime/views/processinstancehistory.js .
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    
    
    No manipulador, chame a onTaskTableHeaderClick função de js/runtime/util/history.js .
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
    
  2. Exponha o TaskTableHeaderClick método em js/runtime/util/history.js .
    O método encontra o atributo tarefa do evento click, classifica a lista de tarefas desse atributo e renderiza a tabela tarefa com a lista de tarefas classificada.
    A classificação é feita usando a função de classificação Backbone na coleção da lista 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();
        };