Personalizzare le tabelle di tracciamento

La scheda di tracciamento nell’area di lavoro di AEM Forms viene utilizzata per visualizzare i dettagli delle istanze del processo in cui è coinvolto l’utente connesso. Per visualizzare le tabelle di tracciamento, seleziona innanzitutto un nome di processo nel riquadro a sinistra per visualizzare l’elenco delle istanze nel riquadro centrale. Selezionare un'istanza di processo per visualizzare una tabella delle attività generate da questa istanza nel riquadro a destra. Per impostazione predefinita, le colonne della tabella visualizzano i seguenti attributi di attività (l'attributo corrispondente nel modello di task è indicato tra parentesi):

• ID ( taskId)
• Nome ( stepName)
• Istruzioni ( instructions)
• Azione selezionata ( selectedRoute)
• Tempo di creazione ( createTime)
• Ora di completamento ( completeTime)
• Proprietario ( currentAssignment.queueOwner)

Gli attributi rimanenti nel modello di task disponibili per la visualizzazione nella tabella di task sono:

Per le seguenti personalizzazioni nella tabella delle attività, è necessario apportare modifiche semantiche nel codice sorgente. Vedi Introduzione alla personalizzazione dell’area di lavoro di AEM Forms per sapere come apportare modifiche semantiche utilizzando l’SDK di workspace e creare un pacchetto minimizzato dall’origine modificata.

Modifica dell’ordine delle colonne delle tabelle

1. Per modificare gli attributi delle attività visualizzati nella tabella e il relativo ordine, configura il file /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>
   

Ordinamento di una tabella di tracciamento

Per ordinare la tabella dell’elenco delle attività facendo clic sull’intestazione della colonna:

1. Registra un gestore di clic per .fixedTaskTableHeader th nel file js/runtime/views/processinstancehistory.js.

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

   Nel gestore, richiama il onTaskTableHeaderClick funzione js/runtime/util/history.js.

   onTaskTableHeaderClick: function (event) {
           history.onTaskTableHeaderClick(event);
   }
   

2. Esporre le TaskTableHeaderClick metodo in js/runtime/util/history.js.

   Il metodo trova l'attributo task dall'evento click, ordina l'elenco task su tale attributo ed esegue il rendering della tabella task con l'elenco task ordinato.

   L'ordinamento viene eseguito utilizzando la funzione di ordinamento Backbone nell'insieme tasklist fornendo una funzione di confronto.

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

Risorse Business.Adobe.com

Auto Form Fill Customer Communications Content Intelligence Theme Editor Document Generation Digital Signage