kViewerの一覧画面の詳細ボタンを文字列に変えたい

[leepero (yamaguchi)]

kViewerのリストビューの一覧画面で、詳細画面に遷移するリンクボタンの画像を「詳細」と記した文字列に変更したい。

下記のようなjavascriptコードになると思うのですが、どなたかご教示してください。

(function() {
  "use strict";
  kv.events.records.mounted = [function (state) {
    // レコード一覧の各レコード要素を取得
    state.records.forEach(function (record) {
      // リンクボタンの要素を取得（仮のセレクタを使用）
      var linkButton = kv.index.getElementByCode(record.$id.value, 'yourLinkButtonFieldCode');
      // リンクボタンのテキストを「詳細」に変更
      if (linkButton) {
        linkButton.textContent = '詳細';
      }
    });
    return state;
  }];
})();

[aaa]

詳細ページへのリンク部分について
kintone側からフィールドコードの指定はされていないので、getElementByCode()を使って操作できるのかわかりませんでした。
（おそらくできないのではないか)

二つイベントで同じことをしています。どちらかだけだとページの表示タイミングと詳細ページから戻ったときに効果が出なかったので二つイベントで設定しています。

(() => {
    "use strict";
    kv.events.records.mounted = [(state) => {
        console.log("kv.events.records.mounted");

        // アイコンを含むすべての要素を取得
        const iconElements = document.querySelectorAll('.ui.large.blue.file.alternate.icon');

        // 各要素に対してループを実行
        iconElements.forEach(element => {
            element.className = ''; // クラスをクリア
            element.textContent = '詳細'; // 新しいテキストを設定
        });
        return state;
    }];
})();


(() => {
    "use strict";
    kv.events.view.index.mounted = [(state) => {
        console.log("kv.events.view.index.mounted ");
        console.log("発生タイミング：レコード一覧ページでのメインコンテンツのDOMを作成された後")
        // アイコンを含むすべての要素を取得
        const iconElements = document.querySelectorAll('.ui.large.blue.file.alternate.icon');

        // 各要素に対してループを実行
        iconElements.forEach(element => {
            element.className = ''; // クラスをクリア
            element.textContent = '詳細'; // 新しいテキストを設定
        });
        return state;
    }];
})();

[aaa]

詳細ページから一覧ページに戻ったときに、どのイベントが呼ばれているのかを確認するのに

kViewer フォームブリッジ編集ボタン非表示

ご参考 カスタマイズするときに、 どのイベントが発生して、 どこでカスタマイズ可能になるタイミングが 発生しているのか、いないのか わかりづらい、試すのが面倒というのがあるとおもいます。 以下のJavaScriptを入れておけば、参照している kintoneレコードと一致したイベントをconsole欄で 確認できて便利かなと思いました。 (() => { "use str…

を利用しました。

アイコンを消して文字を表示する部分については、ChatGPTに質問した結果をコンソールに貼り付けて動作チェックしています。

// アイコンを含むすべての要素を取得
const iconElements = document.querySelectorAll('.ui.large.blue.file.alternate.icon');

// 各要素に対してループを実行
iconElements.forEach(element => {
  element.className = ''; // クラスをクリア
  element.textContent = '詳細'; // 新しいテキストを設定
});

[leepero (yamaguchi)]

aaa様
おかげで思うようなアプリが出来上がりました。
ありがとうございました。
実際に使用したソースはaaa様のソースを若干変更しております。
以下に示します。

(function () {
    "use strict";
    //アイコンを文字列に変更する関数
    function changeIconToString(state) {
        // アイコンを含むすべての要素を取得
        const iconElements = document.querySelectorAll('.ui.large.blue.file.alternate.icon');
        // 各要素に対してループを実行
        iconElements.forEach(element => {
            element.className = ''; // クラスをクリア
            element.textContent = '詳細'; // 新しいテキストを設定
        });
    }
    
  kv.events.records.mounted = [(state) => {
    changeIconToString(state);
    return state;
  }];
  
  kv.events.view.index.mounted = [(state) => {
    changeIconToString(state);
    return state;
   }];
})();