추적 테이블 사용자 지정 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
표시 가능
serviceTitle
currentAssignment
다음 알림 메시지
showACLAactions
기한
numForms
showDirectActions
설명
저장할 numForms를
상태
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportsSave
isApprovalUI
우선 순위
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
작업 사용자 정보
isLocked
프로세스 변수
isMustOpenToComplete
readerSubmitOptions

작업 테이블의 다음 사용자 지정의 경우 소스 코드에서 의미 체계를 변경해야 합니다. 작업 영역 SDK를 사용하여 의미 있는 변경 작업을 수행하고 변경된 소스에서 축소된 패키지를 빌드하는 방법에 대해서는 AEM Forms 작업 영역 사용자 지정 소개를 참조하십시오.

테이블 열 및 열 순서 변경 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. js/runtime/views/processinstancehistory.js 파일에서 .fixedTaskTableHeader th의 클릭 처리기를 등록합니다.

    code language-javascript
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    

    처리기에서 js/runtime/util/history.jsonTaskTableHeaderClick 함수를 호출합니다.

    code language-javascript
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. js/runtime/util/history.js에서 TaskTableHeaderClick 메서드를 표시합니다.

    이 메서드는 클릭 이벤트에서 작업 특성을 찾고, 해당 특성에 대한 작업 목록을 정렬하고, 정렬된 작업 목록과 함께 작업 테이블을 렌더링합니다.

    정렬은 비교 함수를 제공하여 작업 목록 컬렉션의 Backbone 정렬 함수를 사용하여 수행됩니다.

    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