Show Menu
主題×

自訂追蹤表格

AEM Forms工作區中的追蹤標籤可用來顯示涉及登入使用者的程式例項的詳細資料。 若要檢視追蹤表格,請先在左窗格中選取程式名稱,以在中間窗格中查看其例項清單。 選擇一個流程實例,在右窗格中查看此實例生成的任務表。 預設情況下,表列顯示以下任務屬性(任務模型中的相應屬性在括弧中給出):
  • ID ( taskId )
  • 名稱 ( stepName )
  • 說明 ( instructions )
  • 選取的動作 ( selectedRoute )
  • 建立時間( createTime )
  • 完成時間( completeTime )
  • 所有者 ( currentAssignment.queueOwner )
任務模型中可用於顯示在任務表中的其餘屬性為:
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();
        };