Personalizzare le tabelle di tracciamento customize-tracking-tables
La scheda di tracciamento nell’area di lavoro di AEM Forms viene utilizzata per visualizzare i dettagli delle istanze di processo a cui è coinvolto l’utente connesso. Per visualizzare le tabelle di rilevamento, selezionare innanzitutto un nome di processo nel riquadro sinistro 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 di destra. Per impostazione predefinita, nelle colonne della tabella vengono visualizzati i seguenti attributi di task (l'attributo corrispondente nel modello di task è indicato tra parentesi):
- ID (
taskId
) - Nome (
stepName
) - Istruzioni (
instructions
) - Azione selezionata (
selectedRoute
) - Ora 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 al codice sorgente. Consulta Introduzione alla personalizzazione dell'area di lavoro di AEM Forms per informazioni su come apportare modifiche semantiche utilizzando l'SDK dell'area di lavoro e creare un pacchetto minimizzato dall'origine modificata.
Modifica delle colonne della tabella e del relativo ordine changing-table-columns-and-their-order
-
Per modificare gli attributi delle operazioni visualizzati nella tabella e il relativo ordine, configurare il file /ws/js/runtime/templates/processinstancehistory.html :
code language-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>
code language-html <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 sorting-a-tracking-table
Per ordinare la tabella dell'elenco delle attività quando si fa clic sull'intestazione di colonna:
-
Registra un gestore di clic per
.fixedTaskTableHeader th
nel filejs/runtime/views/processinstancehistory.js
.code language-javascript events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }
Nel gestore, richiamare la funzione
onTaskTableHeaderClick
dijs/runtime/util/history.js
.code language-javascript onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); }
-
Esporre il metodo
TaskTableHeaderClick
injs/runtime/util/history.js
.Il metodo trova l'attributo task dall'evento click, ordina l'elenco di task su tale attributo ed esegue il rendering della tabella di task con l'elenco di task ordinato.
L'ordinamento viene eseguito utilizzando la funzione di ordinamento Backbone nell'insieme di elenchi di task mediante una funzione di confronto.
code language-javascript return { //other methods onTaskTableHeaderClick : onTaskTableHeaderClick, //other methods };
code language-javascript 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(); };