自訂追蹤表格 customize-tracking-tables

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
showACLActions
期限
numForms
showDirectActions
說明
numFormsToBeSaved
狀態
顯示名稱
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportssave
isApprovalUI
優先順序
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processinstancestatus
taskUserInfo
isLocked
processVariables
isMustOpenToComplete
readerSubmitOptions

對於工作表中的下列自訂,您需要在原始程式碼中進行語意變更。 另請參閱 自訂AEM Forms工作區簡介 瞭解如何使用Workspace SDK進行語意變更,以及從變更的來源建立縮制的套件。

變更表格欄及其順序 changing-table-columns-and-their-order

  1. 若要修改表格中顯示的工作屬性及其順序,請設定檔案/ws/js/runtime/templates/processinstancehistory.html :

    code language-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>
    
    code language-html
    <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-javascript
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    

    在處理常式中,呼叫 onTaskTableHeaderClick 函式 js/runtime/util/history.js.

    code language-javascript
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. 公開 TaskTableHeaderClick 中的方法 js/runtime/util/history.js.

    此方法會從按一下事件尋找工作屬性、排序該屬性上的工作清單,並呈現工作表格與排序的工作清單。

    藉由提供比較器函式,使用工作清單集合上的骨幹排序函式完成排序。

    code language-javascript
        return {
            //other methods
            onTaskTableHeaderClick  : onTaskTableHeaderClick,
            //other methods
        };
    
    code language-javascript
    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
19ffd973-7af2-44d0-84b5-d547b0dffee2