Customize tracking tables

The tracking tab in AEM Forms workspace is used to display the details of process instances in which the logged-in user is involved. To view the tracking tables, first select a process name in the left pane to see its list of instances in middle pane. 選擇一個流程實例,在右窗格中查看此實例生成的任務表。 預設情況下,表列顯示以下任務屬性(任務模型中的相應屬性在括弧中給出):

  • ID ( taskId)
  • 名稱 ( stepName)
  • 說明 ( instructions)
  • 選取的動作 ( selectedRoute)
  • Creation Time ( createTime)
  • 完成時間( completeTime)
  • 所有者 ( currentAssignment.queueOwner)

The remaining attributes in the task model available for display in the task table are:

actionInstanceId

isOpenFullScreen

rementCount

classOfTask

isOwner

routeList

consultGroupId

isRouteSelectionRequired

savedFormCount

contentType

isShowAttachments

serializedImageTicket

createTime

isStartTask

serviceName

creationId

isVisible

serviceTitle

currentAssignment

nextRements

showACLAactions

期限

numForms

showDirectActions

說明

numFormsToBeSaved

狀態

displayName

outOfficeUserId

summaryUrl

forwardGroupId

outOfficeUserName

supportsSave

isApprovalUI

優先順序

taskACL

isCustomUI

processInstanceId

taskFormType

isDefaultImage

processInstanceStatus

taskUserInfo

isLocked

processVariables

isMustOpenToComplete

readerSubmitOptions

對於任務表中的以下自定義,您需要在原始碼中進行語義更改。 請參 閱自訂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. 在檔案中註冊點按 .fixedTaskTableHeader th 處理常式 js/runtime/views/processinstancehistory.js

    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    

    在處理程式中,調用 onTaskTableHeaderClick 的函式 js/runtime/util/history.js

    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. 在中公 TaskTableHeaderClick 開方法 js/runtime/util/history.js

    該方法從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();
        };
    

本頁內容