Show Menu
SUJETS×

Personnalisation des tableaux de suivi

L’onglet de suivi dans l’espace de travail AEM Forms permet d’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 indiqué entre parenthèses) :
  • ID ( taskId )
  • Nom ( stepName )
  • Instructions ( instructions )
  • Action sélectionnée ( selectedRoute )
  • Heure de création ( createTime )
  • Heure d’achèvement ( 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
reminderCount
classOfTask
isOwner
routeList
consultGroupId
isRouteSelectionRequired
savedFormCount
contentType
isShowAttachments
serializedImageTicket
createTime
isStartTask
serviceName
creationId
isVisible
serviceTitle
currentAssignment
nextReminder
showACLActions
deadline
numForms
showDirectActions
description
numFormsToBeSaved
status
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportsSave
isApprovalUI
priority
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. See Introduction to Customizing AEM Forms workspace fo how you can make semantic changes using workspace SDK and build a minified package from the changed source.

Modification des colonnes du tableau et de leur tri

  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 :
    <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>
    
    

Tri d’un tableau de suivi

Pour trier le tableau de la liste de tâches lorsque vous cliquez sur l’en-tête de la colonne :
  1. Register a click handler for .fixedTaskTableHeader th in the file js/runtime/views/processinstancehistory.js .
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    
    
    In the handler, invoke the onTaskTableHeaderClick function of js/runtime/util/history.js .
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
    
  2. Exposez la TaskTableHeaderClick méthode dans js/runtime/util/history.js .
    La méthode recherche l’attribut de tâche dans l’événement de clic, trie la liste des tâches en fonction de cet attribut, et rend le tableau de la tâche avec la liste des tâches triée.
    Le tri s’effectue à l’aide de la fonction de tri Backbone sur la collection de liste de tâches en fournissant une fonction de comparaison.
        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();
        };