テーブルにカスタム・フォーマットを適用したい
配列のデータを表示する際に最も良く使う画面部品が、テーブルになります。
複数承認者を設定する機能を作成する際に、テーブルの1列目に以下の様に行数に応じて変化する値を表示したかったのですが、データとして文字列を持たせるのはイマイチな実装ですし、テーブルのJavascriptAPIで、列が追加・削除されるために、値を変更する必要もあり、少し実装が煩雑です。
どうしようか悩んでいたのですが、カスタム・フォーマットを用いることで簡単に実装できることが分かりましたので、今回はテーブルのカスタム・フォーマットについて説明します。
カスタム・フォーマットとは？
テーブルには以下の様に構成オプションで、列のカスタマイズを行うことが可能です。renderAs設定でカスタムを選択することで、カスタム・フォーマットが有効になります。
なお、その他の設定の詳細については下記リンク先を参照してください。
https://www.ibm.com/docs/ja/baw/23.x?topic=toolkit-table
カスタムを設定した場合に実際にどのようなロジックでセルを描画するかは、イベント・ハンドラーに記述します。
その際、引数としてcellが渡されるので、必要に応じてこれらのパラメータを用いてHTMLを返します。
行の取得方法
今回は、セルに「第1承認」といった文字列を表示したかっため、cell.row.indexを用いました。
indexは0から開始されるため、+1しています。（indexはテキストとして扱われるようなのでparseInt()してから足し合わせています。）
最終的に以下の様なコードをイベント・ハンドラに指定しています。
var div = document.createElement("div");
div.innerHTML = "第"+(parseInt(cell.row.index)+1)+"承認者";
return div;
描画のタイミングやページングについて
実際に動作させてみたところ、行の追加や削除を行った際にも、自動的に再描画されていることが確認できました。
また、cell.row.indexについてはテーブルのページングを行った際にも影響を受けません。
それらの意味で、インデックス表示を行いたい場合にはカスタム・フォーマットによる実装が便利です。
まとめ
テーブルのカスタム・フォーマットを用いることで、セルに表示する内容をカスタマイズできます。
特にインデックスを用いた表示を行いたい場合には便利な方法ですので是非ご活用ください。
#BusinessAutomationWorkflow(BAW)#baw