自定义跟踪表

AEM Forms工作区中的跟踪选项卡用于显示涉及登录用户的进程实例的详细信息。 要查看跟踪表，请首先在左窗格中选择一个进程名称，以在中间窗格中查看其实例列表。 选择一个进程实例，以在右侧窗格中查看由此实例生成的任务列表。 默认情况下，表列显示以下任务属性（任务模型中的相应属性在括号中给出）：

• ID ( taskId)
• 名称 ( stepName)
• 说明 ( instructions)
• 选择的操作 ( selectedRoute)
• 创建时间(createTime)
• 完成时间(completeTime)
• 所有者 ( currentAssignment.queueOwner)

任务模型中可显示在任务表中的其余属性包括：

对于任务表中的以下自定义，您需要在源代码中进行语义更改。 请参阅自定义AEM Forms工作区简介，了解如何使用工作区SDK进行语义更改，以及如何从更改的源构建缩小的包。

更改表列及其顺序

1. 要修改表中显示的任务属性及其顺序，请配置文件/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>
   

对跟踪表进行排序

要在单击列标题时对任务列表表进行排序，请执行以下操作：

1. 在文件js/runtime/views/processinstancehistory.js中为.fixedTaskTableHeader th注册一个点击处理程序。

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

   在处理程序中，调用js/runtime/util/history.js的onTaskTableHeaderClick函数。

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

2. 在js/runtime/util/history.js中公开TaskTableHeaderClick方法。

   方法从点击事件中查找任务属性，对该属性中的任务列表进行排序，并呈现带有排序任务列表的任务表。

   通过提供比较器函数，使用任务列表集合上的骨干排序函数进行排序。

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