自定义跟踪表

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