編集画面での特定項目のみを更新する際に出るポップアップを消す方法

お世話になっております。
下記実現したいことをする上で困っているので何かわかる方おられたら力を貸していただけると助かります。

【実現したいこと】
・編集画面にてメモ項目のみを更新するボタンを押下して、ポップアップを表示させずに詳細画面へリダイレクトとしたい(データはメモを更新した状態のレコードを表示したい)

【現状】
画像にある更新ボタンを押下時にメモが更新された詳細ページに飛ばすことができている。
ただ、その移動する前に二つのポップアップが表示されてしまい内容が内容なので消したい。

【実行したコード】

(() => {
    'use strict';
     kintone.events.on('app.record.edit.show', (event) => {
       const memoSpace = document.getElementById('user-js-memos_button');
       const updateButton = document.createElement('button');
       updateButton.innerText = "更新";
       updateButton.classList.add("update-button") 

       updateButton.addEventListener('click',async () => {
        const dataUrl = kintone.api.url('/k/v1/record.json', true) + '?app=' + kintone.app.getId()  + '&id=' + kintone.app.record.getId();
        const memoTextBox = document.getElementsByClassName('textarea-cybozu')[0];
        const memoValue = memoTextBox.value
        const requestParam = {
            "app":kintone.app.getId(),
            "id": kintone.app.record.getId(),
            "record": {
                "memo": {
                    "value":memoValue
                }
            }
        }
        Object.defineProperty(window, 'onbeforeunload', {
         set(newValue) {
          if (typeof newValue === 'function') window.onbeforeunload = null;
         }
        });

        kintone.api(kintone.api.url('/k/v1/record.json',true),'PUT',requestParam)
        console.log(location.origin + location.pathname + '#record=' + kintone.app.record.getId());
        location.replace(location.origin + location.pathname + '#record=' + kintone.app.record.getId());
        location.reload();
       })
       memoSpace.replaceWith(updateButton);
     })
})();

ページ遷移前にポップアップが出てくるのは、 kintone 内部の処理で Windowbeforeunload イベントのタイミングでポップアップを出すようにしているからだと思います。なので window.onunbeforeunload を上書きするのはまあ分からなくもないですが……

プログラミング全般の話になりますが、 Window オブジェクトなど最初から用意されているインターフェイスの既定の挙動をその場限りの短絡的な目的のために変更するのは、変更前の挙動を前提に動くプログラムが正しく動かなくなるため、やってはいけません。 余程の自信がない限り、自分で挙動を上書きするのではなく、それらの挙動を利用して目的を実現するべきです。


ちょっと話が脱線しましたが、、、

技術的には kintone 側で定義されたイベントハンドラを外すのは難しいので、イベントを発火させないか、後からキャンセルできるイベントならキャンセルするか、が簡単な方法だと思います。

編集画面 → 詳細画面に遷移するときにポップアップが出るので、編集画面で入力をさせるのではなく詳細画面上に input 要素か textarea 要素で入力ボックスを作成してやれば、ページ遷移が発生しないのでポップアップも出ないのではないでしょうか。

アプローチを変えることになるので要件に合致するか分かりませんが、ご参考までに。

「いいね!」 1

住田さん、ご回答ありがとうございます。
beforeunloadのイベント内でポップアップを出そうとしているのですね。
実際書いても変化はなかったので他にもkintone内で何かしているのかなとは思いました。
今後なにか実装する際に元々用意されたオブジェクトを変更するのは控えようと思います!

ちなみに編集画面で単一項目の更新後、ポップアップを出さずに、データの反映がされた状態の詳細ページを出すことはできました。
下記のようにjsの更新処理の後に編集画面のキャンセルボタンを押して、詳細ページに移動したところでリロードするように実装しました。
ご相談に乗って頂きありがとうございました。

kintone.api(kintone.api.url('/k/v1/record.json',true),'PUT',requestParam)
document.querySelector('.gaia-ui-actionmenu-cancel').click();
location.reload();
「いいね!」 1

確かにキャンセルボタンをクリックするようにすると、ポップアップが出ずに詳細画面に戻るので、そこからリロードで最新データを表示すれば一番やりたいことに近そうですね。

ただし、気になる点があるので補足だけ。

思いつきで、的外れかもしれませんが

スペースフィールドを設置し、編集画面ではなく、詳細画面で編集できるフォームを独自実装などする方法もあるかもしれませんね(そのフォームに入力、独自の保存ボタンをおすことでREST API経由で保存させ、reloadまでおこなう)

「いいね!」 1

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