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

最終更新日: 2023-11-07
  • 作成対象:
  • User

AEM Forms Workspace の「追跡」タブを使用すると、ログインしたユーザーが関係するプロセスインスタンスの詳細を表示できます。追跡テーブルを表示するには、最初に左側のペインでプロセス名を選択して、中央のペインでインスタンスのリストを表示します。 プロセスインスタンスを選択して、このインスタンスによって生成されたタスクのテーブルを右側のウィンドウに表示します。 デフォルトでは、テーブル列には次のタスク属性が表示されます(タスクモデル内の対応する属性は括弧内に表示されます)。

  • 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

優先度

taskACL

isCustomUI

processInstanceId

taskFormType

isDefaultImage

processInstanceStatus

taskUserInfo

isLocked

processVariables

isMustOpenToComplete

readerSubmitOptions

次のタスクテーブルのカスタマイズの場合は、ソースコードでセマンティックの変更を行う必要があります。Workspace SDK を使用してセマンティックの変更を行い、変更されたソースから縮小パッケージを構築する方法については、「AEM Forms Workspace のカスタマイズの概要」を参照してください。

テーブルの列と順序の変更

  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. ファイル js/runtime/views/processinstancehistory.js.fixedTaskTableHeader th にクリックハンドラーを登録します。

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

    ハンドラーで、js/runtime/util/history.jsonTaskTableHeaderClick 関数を呼び出します。

    onTaskTableHeaderClick: function (event) {
            history.onTaskTableHeaderClick(event);
    }
    
  2. TaskTableHeaderClick メソッドを js/runtime/util/history.js で公開します。

    メソッドは、click イベントから task 属性を検索し、その属性の tasklist を並べ替え、並べ替えられた tasklist を使用して task テーブルをレンダリングします。

    並べ替えは、比較関数を提供することで、タスクリストコレクションの 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();
        };
    

このページ