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

2024年7月15日

適用対象：
Experience Manager 6.5

トピック：
アダプティブフォーム

作成対象：

ユーザー
開発者

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	priority	taskACL
isCustomUI	processInstanceId	taskFormType
isDefaultImage	processInstanceStatus	taskUserInfo
isLocked	processVariables
isMustOpenToComplete	readerSubmitOptions

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

テーブル列と順序の変更

テーブルに表示されたタスク属性とそれらの順序を変更するには、ファイル /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>

追跡テーブルの並べ替え

列の見出しをクリックするときにタスクリストテーブルを並べ替えるには、次の手順に従います。

ファイル js/runtime/views/processinstancehistory.js の .fixedTaskTableHeader th にクリックハンドラーを登録します。
events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }
ハンドラーで、js/runtime/util/history.js の onTaskTableHeaderClick 関数を呼び出します。
onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); }

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();
    };

recommendation-more-help