こんにちは！かねごん（@hrbk25）です！
今回は、kintone のテーブルや関連レコードに含まれるフィールドの DOM 操作に関する内容です。
カスタマイズを適用したはずなのに、フィールドの装飾が反映されない、適切に動作しない..そんな経験はありませんか？
このような現象が発生する理由と、その対応方法について簡単にまとめましたので、備忘録として残します。
どんな人向けの記事か
- kintone のカスタマイズを始めたばかりの方
-
getFieldElement()を使って実装をしている方
フィールドの要素を取得する方法
kintone でフィールドの DOM要素（HTML要素） を取得する方法はいくつかあります。
① kintone.app.record.getFieldElement()（推奨）
const fieldElement = kintone.app.record.getFieldElement('テーブル');
console.log(fieldElement);
特徴
-
getFieldElement()は フィールドコード を指定して要素を取得する - 存在しない場合
nullが返る - PCでは、レコード詳細画面、レコード印刷画面で利用可能
② document.querySelector() を使う
const subtableElement = document.querySelector('.subtable-gaia');
console.log(subtableElement);
特徴
-
name属性やclassなどを指定して取得できる - ただし、kintone 側の仕様変更に影響を受ける可能性がある
推奨の理由などは以下を参照してください。
また、DOM要素を確認したい場合は以下のTipsをご活用ください。
なぜgetFieldElement() は特定のフィールドで使用すると null を返す？
結論から言うと、テーブルや関連レコードに含まれるフィールドは、詳細画面を表示した時に DOM がまだ生成されていないためです。
実際に詳細画面を表示したときの状態を確認すると、
文字列などのフィールドが表示されているのに対して、テーブルと関連レコードに含まれるフィールドはDOMがまだ生成されておりません。
また、kintoneの画面表示イベントが発生するタイミング では以下のような記述があります。
補足
kintoneは画面上に表示する多くのコンポーネントをJavaScriptにより描画しています。
そのため、ブラウザーが発生させるDOMContentLoadedやloadイベントの完了と、kintoneのDOM構築が完了するタイミングには直接的な前後関係はありません。
フィールド要素を取得する には、DOMの生成以外にもnullになる条件が記述されています。
ポイント②
null になる条件
- 利用できない画面
- 次のフィールドのフィールドコードを指定したとき
- ステータス
- 作業者
- テーブルに含まれるフィールド
- 関連レコード一覧に含まれるフィールド
- 閲覧権限のないフィールド
- （モバイルのみ）テーブル
- （モバイルのみ）関連レコード一覧
- （モバイルのみ）グループ
対応方法
上記のように、テーブルと関連レコードに含まれるフィールドのDOM生成がされていない時に、対応する方法を1つ記載しておきます。
MutationObserver を使う
DOMに変更が加えられたことを監視することができる機能になり、これを利用することで、フィールドが生成されたタイミングで処理を適用することができます。
kintone.events.on('app.record.detail.show', function(event) {
const tableElement = kintone.app.record.getFieldElement('テーブル');
const observer = new MutationObserver(() => {
//テーブルに含まれるフィールドに対して行う処理を記述
});
observer.observe(tableElement, { childList: true });
});
return event;
});
DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しい MutationObserver を生成して返します。
さいごに
いかがでしたでしょうか？
kintoneのカスタマイズで 「フィールドが取得できない！」 となったときは、まず 「DOMが生成されているか？」 を確認してみてください。
本記事が少しでもお役に立てれば嬉しいです！