kintoneアプリに設置したテーブルがあって、そのテーブル内の条件に応じて背景色を付けるサンプルです。
kintoneのテーブルをJavaScriptでDOM操作するのに必要な基本が入っています。
はじめに完成のイメージ
アプリ設定概要
- テーブル・・・フィールドコード ： 日報_当日
- テーブル内のフィールド・・・フィールドコード ： 時間帯区分
処理概要
アプリ詳細画面を開いたときに、テーブルのセルに設定した時間帯区分の「午前、午後、１時間前」に応じて、テーブル行の背景色を設定します。
処理の流れ
- 詳細画面表示イベントを取得します。
- 操作するターゲットのテーブルフィールドを取得します。
- テーブルの行の時間帯区分フィールドの内容を取得します。
- 時間帯区分フィールドの内容に合わせてテーブル行(tr)にクラス属性をセットします。
- cssのスタイルに合わせてテーブル行に背景色が設定されます。
ソースコード
もっとよいやり方、シンプルなやり方はあるかと思いますのでぜひご意見をいただけると助かります。
（※setIntervalを使ったやり方に変更してみました。）
JavaScriptファイル
jQuery.noConflict();
(function($) {
"use strict";
var events = ["app.record.detail.show"];
var fieldCodeSubTable = "日報_当日";
kintone.events.on(events, function(event) {
var record = event.record;
var recordId = kintone.app.record.getId();
var subTable = record[fieldCodeSubTable].value;
console.log(subTable);
console.log(subTable.length);
if (subTable.length === 0) { return event } // subtable record nothing
// テーブルフィールドを取得
var el = kintone.app.record.getFieldElement(fieldCodeSubTable);
// テーブルの行数を取得します
function asyncProcess(val, len) {
console.log(val);
console.log(len);
return new Promise((resolve, reject) => {
var timer = setInterval(() => {
if (val.length - 1 === len) {
console.log(val.length);
clearInterval(timer);
resolve(val.length);
} else {
console.log(val.length);
}
}, 100);
});
}
// テーブルの行内のセルの内容に合わせて、tr要素にクラス属性をセットします
asyncProcess(el.rows, subTable.length).then(
response => {
for (var i=1, len=response; i<len; i+=1) {
var timeTable = el.rows[i].cells[0].textContent;
switch (timeTable) {
case '午前' :
el.rows[i].classList.add("am");
break;
case '午後' :
el.rows[i].classList.add("pm");
break;
case '１時間前' :
el.rows[i].classList.add("last");
break;
default :
console.log(timeTable);
}
}
return event;
},
error => {
console.log(error);
return event;
}
);
});
})(jQuery);
CSSファイル
.am {
background-color:#7AE1FF;
}
.pm {
background-color:#7BE5B8;
}
.last {
background-color:#E5D351;
}
まとめ
kintoneのテーブルを操作する場合に注意したい点は、テーブルの描画タイミングです。
画面の最後で描画されているようなので、テーブル行数を取得してループで各行のDOMを操作する場合は、setTimeoutを使ってテーブルの描画を待つ必要があります。
テーブルの描画待ちをsetTimeoutからsetIntervalに変更しました。rex0220さん、アドバイスありがとうございます。
尚、同じような内容の投稿が cybozu developer network にありましたので、リンクしておきます。
- レコードに登録されたテーブルの文字列をみてスタイルシートのTRカラーを定義したい https://developer.cybozu.io/hc/ja/community/posts/115000371146