自訂追蹤表格 customize-tracking-tables
AEM Forms工作區中的追蹤標籤可用來顯示與登入使用者有關的程式例項詳細資訊。 若要檢視追蹤表格,請先在左側窗格中選取程式名稱,以便在中間窗格中查看其執行個體清單。 在右窗格中選擇一個進程實例以查看該實例生成的任務表。 預設情況下,表列顯示以下任務屬性(任務模型中的相應屬性以括弧表示):
- ID (
taskId) - 名稱 (
stepName) - 指示 (
instructions) - 選取的動作 (
selectedRoute) - 建立時間(
createTime) - 完成時間(
completeTime) - 所有者 (
currentAssignment.queueOwner)
任務模型中可用於顯示在任務表中的剩餘屬性為:
對於任務表中的以下自定義項,您需要在原始碼中執行語義更改。 請參閱 自訂AEM Forms工作區簡介 如何使用工作區SDK進行語義變更,並從變更的來源建立縮制套件。
更改表列及其順序 changing-table-columns-and-their-order
-
要修改表中顯示的任務屬性及其順序,請配置檔案/ws/js/runtime/templates/processinstancehistory.html :
code language-as3 <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-as3 <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
要在按一下列標題時對任務清單表進行排序:
-
註冊點擊處理程式
.fixedTaskTableHeader th檔案中js/runtime/views/processinstancehistory.js.code language-as3 events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }在處理常式中,叫用
onTaskTableHeaderClick函式js/runtime/util/history.js.code language-as3 onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); } -
公開
TaskTableHeaderClick方法輸入js/runtime/util/history.js.該方法從點擊事件中查找任務屬性,對該屬性上的任務清單進行排序,並使用排序的任務清單呈現任務表。
通過提供比較器函式,使用任務清單集合上的骨幹分類函式進行分類。
code language-as3 return { //other methods onTaskTableHeaderClick : onTaskTableHeaderClick, //other methods };code language-as3 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
a6ebf046-2b8b-4543-bd46-42a0d77792da