自定义跟踪表 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