kintoneにはフィールドのDOM要素を取得するAPIが用意されているが、
サブテーブルには対応していない。（API仕様についてはコチラを参照）
それでも実装するとなると、DOM要素をjQuery等で直接取得して処理をすることになる。
これは今後のkintoneのアップデートで動作しなくなる恐れが有る為、公式では非推奨の方法。
非推奨なので恐らく需要無さそうだけど、興味本位でサブテーブルに背景色を設定してみたら幾つか躓いた点も有ったのでメモ。
完成形
最終的にやりたい事はこんな感じ。
サブテーブル中のフィールド（ここでは背景色（2列目））の値に応じて背景色を設定する。
コード
コードはこんな感じ。
色の設定部分は別途CSSを使って設定した方がお行儀良いのかも。。。
// サブテーブルフィールドのクラス名セレクタ
const TABLE_SELECTOR = '.subtable-5535672';
// 何列目に背景色を設定するか
const COLOR_COLUMN_INDEX = '1';
const setColor = function(colors) {
// 1000ミリ秒毎にfindTargetElementを実行
const intervalId = setInterval(findTargetElement, 1000);
// 要素を見つける処理
function findTargetElement() {
const rows = $(TABLE_SELECTOR).find('tbody').find('tr');
if($(rows).length > 0) {
// 要素が見つかったらインターバル処理を中断
clearInterval(intervalId);
// 背景色を設定する行indexを対象に処理
colors.forEach(function(index) {
$(rows[index]).find('td:nth-child(' + COLOR_COLUMN_INDEX + ')').css('background-color', 'yellow');
});
}
}
};
kintone.events.on("app.record.detail.show", function(e) {
const colors = [];
const rows = e.record['Table'];
for(var i=0; i<rows['value'].length; i++) {
// 背景色設定対象の行indexを格納
if (rows['value'][i]['value']['背景色']['value'] === "設定する") {
colors.push(i);
}
}
// 背景色設定処理
setColor(colors);
});
ポイント１：サブテーブルの要素の取得方法
冒頭に述べた通り、サブテーブル外のフィールドについては、そのフィールドのDOM要素を取得するAPIが用意されているが、サブテーブルのフィールドについては自力で取得するしかない。
今回は、jQueryで
const rows = $(TABLE_SELECTOR).find('tbody').find('tr');
のように取得した。
尚、プログラム上部で定数で定義している
// サブテーブルフィールドのクラス名セレクタ const TABLE_SELECTOR = '.subtable-5535672';
このセレクタは、環境によって異なるので書き換える必要がある。
Chromeの場合、F12の開発者ツールでDOM要素が解析されるので、クラス名を覗き見る事ができる。
ポイント２：サブテーブルの描画を待機する
レコード詳細表示イベント（kintone.events.on()部分）ではサブテーブルの描画は完了していない為、テーブルの行要素を取得しようとしても結果はnullになる。
そこでQiitaのコチラの記事を参考に、setIntervalを使用した。この部分。
// 1000ミリ秒毎にfindTargetElementを実行 const intervalId = setInterval(findTargetElement, 1000);
そして要素が発見できたら、clearIntervalでインターバル処理を中断するとの事。
// 要素が見つかったらインターバル処理を中断 clearInterval(intervalId);
setInterval／clearIntervalは使う機会無かったので、良い機会だった。
おわりに
実はサブテーブル周りの操作はkintone APIの動作対象外という事が多い。
今回の様にDOM操作を行えば実現可能だが、先々の事を考えると現実的ではない。
今後のアップデートに期待、、、かな？
