kViewerの編集ボタンを任意の場所に移動する。

kViewerのバージョンアップによって今までできていた、編集ボタンの設定ができなくなりました。
また、JavaScriptカスタマイズのページも新しくなりました。
今回はその解決策として、ラベル位置に編集ボタンを設置するJavaScriptカスタマイズを紹介します。

手順

---

レコード詳細に空のラベルを設置します。フィールドコードはeditと設定します。
このラベルの位置が編集ボタンの位置になります。
下記のJavaScriptを保存してkViewerに適応してください。

編集ボタンを移動するコード

(function () {
    "use strict";

    kviewer.events.on('record.show', function (context) {
        console.log('record.showのタイミングです移動を試みます');

        // kv-detail-fb-button クラスの編集ボタンを取得
        const buttonElement = document.querySelector('.kv-detail-fb-button');

        // 適当なラベルを用意してその中に編集ボタンを異移動しています
        // data-field-code が "edit" の要素に要素を移動
        const labelName = "edit"
        const targetElement = document.querySelector(`[data-field-code="${labelName}"]`);

        if (buttonElement && targetElement) {
            targetElement.appendChild(buttonElement);
            console.log('編集ボタンを data-field-code="edit" の配下に移動しました');
        } else {
            console.log('編集ボタンまたは移動先の要素が見つかりませんでした');
        }

        return context;
    });

})();

結果

編集ボタンが上の方に来ました

参考

---

JavaScriptカスタマイズ | kViewer