6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

kintoneのレコード詳細に設置したテーブル行に、条件に応じて背景色をつけてやる

Last updated at Posted at 2018-05-03

kintoneアプリに設置したテーブルがあって、そのテーブル内の条件に応じて背景色を付けるサンプルです。
kintoneのテーブルをJavaScriptでDOM操作するのに必要な基本が入っています。

はじめに完成のイメージ

スクリーンショット 2018-05-03 22.35.40.png

アプリ設定概要

  • テーブル・・・フィールドコード : 日報_当日
  • テーブル内のフィールド・・・フィールドコード : 時間帯区分

処理概要

アプリ詳細画面を開いたときに、テーブルのセルに設定した時間帯区分の「午前、午後、1時間前」に応じて、テーブル行の背景色を設定します。

処理の流れ

  1. 詳細画面表示イベントを取得します。
  2. 操作するターゲットのテーブルフィールドを取得します。
  3. テーブルの行の時間帯区分フィールドの内容を取得します。
  4. 時間帯区分フィールドの内容に合わせてテーブル行(tr)にクラス属性をセットします。
  5. 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 '1時間前' :
                            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 にありましたので、リンクしておきます。

6
7
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?