追跡テーブルのカスタマイズ customize-tracking-tables
AEM Forms Workspace の「追跡」タブを使用すると、ログインしたユーザーが関係するプロセスインスタンスの詳細を表示できます。追跡テーブルを表示するには、最初に左側のパネルでプロセス名を選択して、中央のパネルでインスタンスのリストを表示します。プロセスインスタンスを選択すると、このインスタンスによって生成されたタスクのテーブルが右側のパネルに表示されます。デフォルトで、テーブル列に以下のタスク属性が表示されます(タスクモデルの対応する属性は括弧内に表示)。
- ID(
taskId
) - 名前(
stepName
) - 説明(
instructions
) - 選択されたアクション(
selectedRoute
) - 作成時刻(
createTime
) - 完了時刻(
completeTime
) - 所有者(
currentAssignment.queueOwner
)
タスクテーブルに表示できるタスクモデルの残りの属性は次のとおりです。
次のタスクテーブルのカスタマイズの場合は、ソースコードでセマンティックの変更を行う必要があります。Workspace SDK を使用してセマンティックの変更を行い、変更されたソースから縮小パッケージを構築する方法については、「AEM Forms Workspace のカスタマイズの概要」を参照してください。
テーブル列と順序の変更 changing-table-columns-and-their-order
-
テーブルに表示されたタスク属性とそれらの順序を変更するには、ファイル /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
列の見出しをクリックするときにタスクリストテーブルを並べ替えるには、次の手順に従います。
-
ファイル
js/runtime/views/processinstancehistory.js
の.fixedTaskTableHeader th
にクリックハンドラーを登録します。code language-javascript events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }
ハンドラーで、
js/runtime/util/history.js
のonTaskTableHeaderClick
関数を呼び出します。code language-javascript onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); }
-
TaskTableHeaderClick
メソッドをjs/runtime/util/history.js
で公開します。メソッドはクリックイベントからタスク属性を検索し、その属性のタスクリストを並べ替えて、並べ替えられたタスクリストでタスクテーブルをレンダリングします。
並べ替えは、比較関数を指定することによって、タスクリストコレクションの 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(); };