自訂追蹤表格

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方法。

   該方法從click事件中查找任務屬性，對該屬性上的任務清單進行排序，並使用排序的任務清單呈現任務表。

   通過提供比較器功能，使用任務清單集合上的Backbone排序功能進行排序。

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