自定义跟踪表 customize-tracking-tables

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

AEM Forms工作区中的跟踪选项卡用于显示涉及登录用户的进程实例的详细信息。 要查看跟踪表,请首先在左窗格中选择一个进程名称,以在中间窗格中查看其实例列表。 选择一个进程实例,以在右侧窗格中查看由此实例生成的任务列表。 默认情况下,表列显示以下任务属性(任务模型中的相应属性在括号中给出):

  • ID ( taskId)
  • 名称 ( stepName)
  • 说明 ( instructions)
  • 选择的操作 ( selectedRoute)
  • 创建时间( createTime)
  • 完成时间( completeTime)
  • 所有者 ( currentAssignment.queueOwner)

任务模型中可显示在任务表中的其余属性包括:

actionInstanceId
isOpenFullScreen
reminderCount
classOfTask
isOwner
routeList
consultGroupId
isRouteSelectionRequired
savedFormCount
contentType
isShowAttachments
serializedImageTicket
createTime
isStartTask
serviceName
creationId
isVisible
serviceTitle
currentAssignment
nextReminder
showACLAactions
截止时间
numForms
showDirectActions
说明
numFormsToBeSaved
状态
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportsSave
isApprovalUI
优先级
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
taskUserInfo
isLocked
processVariables
isMustOpenToComplete
readerSubmitOptions

对于任务表中的以下自定义,您需要在源代码中进行语义更改。 请参阅 自定义AEM Forms工作区简介 了解如何使用工作区SDK进行语义更改,以及如何从更改的源构建缩小的包。

更改表列及其顺序 changing-table-columns-and-their-order

  1. 要修改表中显示的任务属性及其顺序,请配置文件/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

要在单击列标题时对任务列表表进行排序,请执行以下操作:

  1. 为注册点击处理程序 .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);
    }
    
  2. 公开 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