関連レコードに表示される「参照するレコードがありません。」を変更したい

[chika (二林🔰)]

実現したいこと

関連レコードが0件の際に表示される「参照するレコードがありません。」の文字を
「対象なし」に変更したいのですが、なかなかうまくいきません。
なにか追加でコード記載が必要でしょうか？

実行したコードをコピー＆ペーストしましょう

     const targetElement = document.querySelector('.reference_table-message-gaia');
       if (targetElement) {
        targetElement.textContent = '該当なし'; // Replace with the desired new text
        }     

<表示されているHTML>

<table class="subtable-gaia reference-subtable-gaia" >

<thead class="subtable-header-gaia">
<tr> **** </tr>
</thead>

<tbody>
<td colspan="4" class="reference_table-message-gaia">
参照するレコードがありません。
</td>
</tbody>

</table> 

[hosoya (細谷崇)]

@chika さん

「参照するレコードがありません。」の文字は確かkintoneの詳細ページの描画が終わってから、DOMが書き換えられる箇所になるかなと思います。

const targetElement = document.querySelector('.reference_table-message-gaia');
       if (targetElement) {
        targetElement.textContent = '該当なし'; // Replace with the desired new text
        }

なのでこちらのコードのどのタイミングで動いているのかがポイントになります。
「参照するレコードがありません。」の文字の描画が完了する前に上記のコードが先に動いている場合は書き換えがうまくできないと思います。

うまくいくかはわからないのですが、 ObserverなどでDOMの監視をして、上記コードを実行する必要があるかなと思います！

[hosoya (細谷崇)]

@chika

パッとしか以下の記事を見てないですが、この記事を見てもらえると書き換えれない原因がイメージできるのでは？と思いました。

kintone 関連レコード詳細画面で遅延表示の動作検証 - Qiita

[chika (二林🔰)]

ご返信ありがとうございます。
関連レコードが表示される前にこちらのコードが早く動いてしまっていました。

以下のコードを実行したら表示が変わるようになったのですが、
不安定かつ詳細画面で違うレコードに変えると機能しないため、文字変更ではなく非表示にして別のフィールドを表示するに方向転換したほうがいいかもしれないなと思いました。

方向転換するかもしれませんが、本件とても勉強になりました。
ありがとうございました。

window.onload = function() {

    setTimeout(function() {
            const targetElements = document.querySelectorAll('.reference_table-message-gaia');
    
    targetElements.forEach(element => {
    element.textContent = '対象なし';
        
    });     
    }, 500); 
};