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

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

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;
  }];
})();

詳細ページへのリンク部分について
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;
    }];
})();

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

を利用しました。

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

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

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

kviewer_shousai

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;
   }];
})();

1 Like

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