Show Menu
トピック×

追跡テーブルのカスタマイズ

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
deadline
numForms
showDirectActions
description
numFormsToBeSaved
status
displayName
outOfOfficeUserId
summaryUrl
forwardGroupId
outOfOfficeUserName
supportsSave
isApprovalUI
priority
taskACL
isCustomUI
processInstanceId
taskFormType
isDefaultImage
processInstanceStatus
taskUserInfo
isLocked
processVariables
isMustOpenToComplete
readerSubmitOptions
以下のタスクテーブルのカスタマイズの場合は、ソースコードでセマンティックの変更を行う必要があります。See Introduction to Customizing AEM Forms workspace fo how you can make semantic changes using workspace SDK and build a minified package from the changed source.

テーブル列と順序の変更

  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. Register a click handler for .fixedTaskTableHeader th in the file js/runtime/views/processinstancehistory.js .
    events: {
        //other handlers
        "click .fixedTaskTableHeader th": "onTaskTableHeaderClick",
        //other handlers
    }
    
    
    In the handler, invoke the onTaskTableHeaderClick function of js/runtime/util/history.js .
    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
    
  2. TaskTableHeaderClick メソッドを公開し js/runtime/util/history.js ます。
    メソッドはクリックイベントからタスク属性を検索し、その属性のタスクリストを並べ替えて、並べ替えられたタスクリストでタスクテーブルをレンダリングします。
    並べ替えは、比較関数を指定することによって、タスクリストコレクションの 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();
        };