カスタマイズサブテーブルの固定項目

kintone カスタマイズ
1

いつもお世話になっております。

以下の項目を固定したいですが、Copy JS pathで利用してコードを書きました。

うまく行けないですのでこちらの原因はわかる方が教授していただけますか。

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

jsPath:-> document.querySelector(“#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)”)

jsCode:->

kintone.events.on([‘app.record.detail.show’], function(event) {

…略…

var item = document.querySelector(“#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)”);

    item.style.position = ‘sticky’;

    item.style.left = ‘0’;

    item.style.zIndex = ‘1’;

return;

});

 

 

error:

 

2

minhlongjapan さん

app.record.detail.show イベントが発生した段階でサブテーブル要素がまだ存在していないことが原因です。MutationObserver などを利用してサブテーブルの描画を待てば取得できますが、実現したいことがセルの固定（スタイルの設定）のみでしたら、カスタム CSS に記述するのはいかがでしょうか？

参考ですが、下記のコードで検証すると挙動が確認できます。

kintone.events.on('app.record.detail.show', function(event) {
    // この段階では要素が存在しないため null が出力
  console.log(document.querySelector("#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)"))

    setTimeout(() => {
        // 検証用：一定時間待機すると要素が取得できる
      console.log(document.querySelector("#record-gaia > div > div.subtable-row-gaia.subtable-row-5979279 > table > tbody > tr:nth-child(1) > td:nth-child(1)"))
    }, 2000)

    return event
});

以上になります。不明な点がありましたら、気兼ねなくご質問ください。

3

川村様

ご教授ありがとうございます。

setTimeoutを使ってうまく動きました。

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

4

minhlongjapan さん

念の為補足ですが、コードはあくまでも検証用ですので、setTimeout で実装しても2000ミリ秒後に要素があるとは保証はできません。ご留意ください。

5

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