【フォームブリッジ】テーブルのページング時のイベント

kintone カスタマイズ
1

背景・実現したいこと

フォームブリッジで、テーブルのページが切り替わった際のイベントを取得するにはどのようにすればよいのでしょうか。

フォームブリッジとkviewerを連携して、データの修正を可能にしております。また、フォーム上にテーブルフィールドがあります。

 fb.events.form.mounted時に、fb.getTableElementsByCodeでスタイルをセットしているのですが、元々のデータに21行目以降がある際に、ページ切り替え時に同様にスタイルをセットしたいのですが、どのような実現方法がありますでしょうか。

よろしくお願いいたします。

2

PVさん

こんにちは。

 

デザインのみの変更であれば、CSSで定義した方が早いです。

デザイン変更以外にも何かしらの計算であったり、CSSに対応していないようなデザイン変更であればJavaScriptでの実装となりますが、まずはCSSで可能かどうかご確認ください。

3

koichiさん

ご回答ありがとうございます。

行の値によって、特定の行のフィールドの文字色を変更する形になるので、CSSで一括して変更するのは難しいように思われます。

（フィールドの値がAなら赤、Bなら青、AかつBなら緑・・・といったようなイメージです。）

MutationObserverを使用してページの切り替えを検知しセットする方法ではできているのですが、フォームブリッジのカスタマイズとして、ページ切り替えはどのように検知するのが正しいのでしょうか。

よろしくお願いいたします。

4

それですと記載の通りMutationObserverが良いですね。

(function() {

    'use strict';

    fb.events.form.mounted = [function(state) {

      // サブテーブルのtbodyを監視（tbody要素に変更があると処理が走る）
        const target = fb.getElementByCode('テーブル').getElementsByTagName('tbody')[0];
        // ノードに変化があれば実行
        const observer = new MutationObserver(function() {
            fb.getTableElementsByCode('テーブル', '数値')[0].style.backgroundColor = '#f00';
            fb.getTableElementsByCode('テーブル', '数値')[1].style.backgroundColor = '#0f0';
            fb.getTableElementsByCode('テーブル', '数値')[2].style.backgroundColor = '#00f';
        });
        const config = { childList: true, subtree: true };    // 監視を指定するオプション
        observer.observe(target, config);        // 監視開始

    }];

})();
5

koichiさん

ご回答ありがとうございます。またサンプルのご提示ありがとうございます。

やはり、MutationObserverで検知する形になるのですね。

ありがとうございました。

 

6

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。