Personalizar tabelas de rastreamento

A guia de rastreamento no espaço 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:

Para as seguintes personalizações na tabela tarefa, é necessário fazer alterações semânticas no código-fonte. Consulte Introdução à área de trabalho Personalizar AEM Forms para saber como fazer alterações semânticas usando o SDK do espaço 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();
       };