自訂追蹤表格 customize-tracking-tables
AEM Forms工作區中的追蹤索引標籤是用來顯示登入使用者涉及之程式執行個體的詳細資訊。 若要檢視追蹤表格,請先在左窗格中選取處理名稱,以在中間窗格中檢視其執行處理清單。 選取程式執行處理,在右窗格中檢視此執行處理產生的任務表格。 依照預設,表格欄會顯示下列工作屬性(工作模型中的對應屬性會以括弧指定):
- 識別碼(
taskId
) - 名稱(
stepName
) - 指示(
instructions
) - 選取的動作(
selectedRoute
) - 建立時間(
createTime
) - 完成時間(
completeTime
) - 擁有者(
currentAssignment.queueOwner
)
任務模型中可顯示在任務表格中的其餘屬性包括:
對於工作表中的下列自訂,您需要在原始程式碼中進行語意變更。 請參閱自訂AEM Forms工作區簡介,瞭解如何使用Workspace SDK進行語意變更,以及從變更的來源建立縮制的套件。
變更表格欄及其順序 changing-table-columns-and-their-order
-
若要修改表格中顯示的工作屬性及其順序,請設定檔案/ws/js/runtime/templates/processinstancehistory.html :
code language-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>
code language-html <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>
排序追蹤表格 sorting-a-tracking-table
若要在按一下欄標題時排序工作清單表格:
-
在檔案
js/runtime/views/processinstancehistory.js
中註冊.fixedTaskTableHeader th
的點選處理常式。code language-javascript events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }
在處理常式中,叫用
js/runtime/util/history.js
的onTaskTableHeaderClick
函式。code language-javascript onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); }
-
在
js/runtime/util/history.js
中公開TaskTableHeaderClick
方法。此方法會從按一下事件尋找工作屬性、排序該屬性上的工作清單,並呈現工作表格與排序的工作清單。
藉由提供比較器函式,使用工作清單集合上的骨幹排序函式完成排序。
code language-javascript return { //other methods onTaskTableHeaderClick : onTaskTableHeaderClick, //other methods };
code language-javascript 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(); };
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2