Personnaliser les tableaux de tracking customize-tracking-tables

L’onglet de suivi dans l’espace de travail AEM Forms est utilisé pour afficher les détails des instances de processus dans lesquelles l’utilisateur connecté est impliqué. Afin de visualiser les tableaux de suivi, vous devez d’abord sélectionner le nom d’un processus dans le volet gauche pour afficher la liste de ses instances dans le volet central. Sélectionnez une instance de processus pour afficher un tableau des tâches générées par cette instance dans le volet droit. Par défaut, les colonnes du tableau affichent les attributs de tâche suivants (l’attribut correspondant dans le modèle de tâche est donné entre parenthèses) :

  • ID ( taskId)
  • Nom ( stepName)
  • Instructions ( instructions)
  • Action sélectionnée ( selectedRoute)
  • Heure de création (createTime)
  • Heure de fin (completeTime)
  • Propriétaire ( currentAssignment.queueOwner)

Les attributs restants dans le modèle de tâche disponibles à l’affichage dans le tableau de la tâche sont les suivants :

actionInstanceId
isOpenFullScreen
rappderCount
classOfTask
isOwner
routeList
consultGroupId
isRouteSelectionRequired
savedFormCount
contentType
isShowAttachments
serializedImageTicket
createTime
isStartTask
serviceName
createdId
isVisible
serviceTitle
currentAssignment
nextReminder
showACLActions
échéance
numForms
showDirectActions
description
numFormsToBeSaved
status
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportsSave
isApprovalUI
priorité
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
taskUserInfo
isLocked
processVariables
isMustOpenToComplete
readerSubmitOptions

Pour les personnalisations suivantes dans le tableau de la tâche, vous devez effectuer des modifications sémantiques dans le code source. Reportez-vous à la section Introduction à la personnalisation de l’espace de travail AEM Forms pour savoir comment effectuer des modifications sémantiques à l’aide du SDK de l’espace de travail et créer un package minimisé à partir de la source modifiée.

Modification des colonnes du tableau et de leur ordre changing-table-columns-and-their-order

  1. Pour modifier les attributs de tâche affichés dans le tableau et leur ordre, configurez le fichier /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>
    

Tri d'une table de tracking sorting-a-tracking-table

Pour trier le tableau de la liste des tâches lorsque vous cliquez sur l’en-tête de colonne :

  1. Enregistrez un gestionnaire de clic pour .fixedTaskTableHeader th dans le fichier js/runtime/views/processinstancehistory.js.

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

    Dans le gestionnaire, appelez la fonction onTaskTableHeaderClick de js/runtime/util/history.js.

    code language-javascript
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. Exposez la méthode TaskTableHeaderClick dans js/runtime/util/history.js.

    La méthode trouve l’attribut task à partir de l’événement click, trie la liste de tâches en fonction de cet attribut et effectue le rendu de la table de tâches avec la liste de tâches triée.

    Le tri est effectué à l’aide de la fonction de tri Backbone sur la collection de liste de tâches en fournissant une fonction de comparaison.

    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();
        };
    
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2