Personalizar tabelas de rastreamento customize-tracking-tables

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

A guia tracking no espaço de trabalho do AEM Forms é usada para exibir os detalhes das instâncias do processo em que 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 conclusão ( 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
nextLembreder
showACLActions
prazo
numForms
showDirectActions
descrição
numFormsToSave
status
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportSave
isApprovalUI
prioridade
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
taskUserInfo
isLocked
processVariables
ismustOpenToComplete
readerSubmitOptions

Para as personalizações a seguir na tabela de tarefas, é necessário 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 fonte alterada.

Alteração das colunas da tabela e sua ordem changing-table-columns-and-their-order

  1. Para modificar os atributos de tarefa exibidos na tabela e sua ordem, configure o arquivo /ws/js/runtime/templates/processinstancehistory.html :

    code language-as3
    <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>
    
    code language-as3
    <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 sorting-a-tracking-table

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

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

    code language-as3
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    

    No manipulador, chame o onTaskTableHeaderClick da js/runtime/util/history.js.

    code language-as3
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. Exponha a TaskTableHeaderClick método em js/runtime/util/history.js.

    O método encontra o atributo da tarefa do evento click, classifica a lista de tarefas nesse atributo e renderiza a tabela de tarefas 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.

    code language-as3
        return {
            //other methods
            onTaskTableHeaderClick  : onTaskTableHeaderClick,
            //other methods
        };
    
    code language-as3
    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();
        };
    
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da