追跡テーブルのカスタマイズ 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-as3 <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-as3 <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-as3 events: { //other handlers "click .fixedTaskTableHeader th": "onTaskTableHeaderClick", //other handlers }ハンドラーで、
js/runtime/util/history.jsのonTaskTableHeaderClick関数を呼び出します。code language-as3 onTaskTableHeaderClick: function (event) { history.onTaskTableHeaderClick(event); } -
TaskTableHeaderClickメソッドをjs/runtime/util/history.jsで公開します。メソッドは、click イベントから task 属性を検索し、その属性の tasklist を並べ替え、並べ替えられた tasklist を使用して task テーブルをレンダリングします。
並べ替えは、比較関数を提供することで、タスクリストコレクションの Backbone 並べ替え関数を使用して行われます。
code language-as3 return { //other methods onTaskTableHeaderClick : onTaskTableHeaderClick, //other methods };code language-as3 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(); };