自訂追蹤表格

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