新規追加・訂正変更の保存成功後にクリップボードにコピーし、SweetAlertでお知らせする

背景・実現したいこと

 PDFにするファイル名を文字連結式フィールドのファイル名から、新規追加・訂正変更の保存成功後にクリップボードにコピーし、SweetAlertでお知らせする(そっちこっちの寄せ集め、https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.jsは読み込み済み)

エラー情報 (開発者ツールのコンソール)

Chromeのデバッガではエラー不検出のためどこが間違いなのかご教授お願いいたします。

利用したソースコード

(function() {
“use strict”;
var events = [
"app.record.create.submit.success    ",
"app.record.edit.submit.success    ",
];

kintone.events.on(events, function(event) {
var record = event.record;

      let copyFrom = document.createElement(“textarea”);
      copyFrom.textContent = event.record[“ファイル名”].value;
      let bodyElm = document.getElementsByTagName(“body”)[0];
      bodyElm.appendChild(copyFrom);
      copyFrom.select();
      document.execCommand(‘copy’);

      swal({
       title: record[“ファイル名”].value,
       text: ‘このファイル名をクリップボードにコピーしました!’,
button: ‘OK’
      });

return event;

});
})();

イベントハンドラーの中は精査してないのですが, 少なくとも、

var events = [
"app.record.create.submit.success    ",
"app.record.edit.submit.success    ",
];

この箇所、無駄なスペースが入ってしまっているのが気になります。正確でなければ動作はしないですね。

村濱一樹 さま

お世話になります。早速のご解答ありがとうございます。

おっしゃる通り、空白を見落としておりました。

取り除いて実行すると、、、

1.新規追加保存時

SweetAlertが出て、フォームの真下に謎のボックス(編集可能)

が出現しその中にクリップボードの値が表示され、その瞬間

SweetAlertと謎のボックスが消え、OK押すまでもない挙動。

2.訂正変更保存時

SweetAlertが出て、フォームの真下に謎のボックス(編集可能)

が出現しその中にクリップボードの値が表示され、SweetAlertの

OK押せる状態にはなります(謎のボックスは表示のまま)。

どちらもChromeのデバッガではエラー不検出です。

クリップボードの値はどちらも正常に動作します。

謎のボックスを消す方法が解らないことと、イベント処理が解りません。

ご教授のほど宜しくお願い致します。

 

私もこちら単体で試したところ、スペース削除のみで上記コードで通常通りSweatAlert表示から消える(厳密には表示上消えてる)まで動きましたね。

また別の書き方でもやってみたので下記に記しておきます。(exeCommandが非推奨のようでしたので)

が、肝心のSweatAlertでの問題について再現できなかったのでアドバイスになりませんが、謎のボックスを右クリック→検証しそれ自体が何かを確認してみるのがいいかと思います。恐らく隠れるべきSweetAlertが他の要因で出てるような感じがしますが。

(function () {
      "use strict";
      const events = ["app.record.create.submit.success", "app.record.edit.submit.success"];
      kintone.events.on(events, async function (event) {
              const record = event.record;
              const fileName = record["ファイル名"].value
              const alert = {
                      title: fileName,
                      text: 'このファイル名をクリップボードにコピーしました!',
                      button: 'OK'
              };
                await navigator.clipboard.writeText(fileName).then(resp => { swal(alert) });
              return event;
      });
})();

nabeさま

わざわざご検証してくださいましてありがとうございます。

超初心者故、JSEdit for kintone にご教示のコードを貼り付けると、4行目と14行目に△!が付きます。

また、await navigator.clipboard.writeText(fileName).then(resp => { swal(alert) });

の挙動が解りません。

もっと勉強いたします。

 

JSEdit上でも試してみたのですが、エディタ上、注意が出てしまいますね。。(カーソル合わせるとセミコロン有無等で)。

動作自体はこちらで動きます。が、JSEditで分かったのですが、JSEdit中のSweatAlertでライブラリ挿入すると上記ボックスが出てるようですね。こちらバージョン(v1)古いものがささるようなので、JSカスタマイズ上のsweatAlertのライブラリを下記のものにURL書き換えてみてください。

https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js

kintone参照記事

navigatorの挙動はexecCommandを書き換えたようなものになります

execCommand参照ドキュメント

nabeさま

ご教示ありがとうございます。

JSEditにコピペし、SweatAlertをv2.1.2に直し動作確認したところ

謎のボックスは現れない代わりに、新規追加時は一瞬だけSweatAlertが

出現するもののOKボタン処理待たずに詳細画面に戻ってしまいます。

(編集時は問題なく動作しました)

調べると、レコード追加画面の保存実行前イベントでは

「kintone.Promiseオブジェクトをreturnすると、非同期処理の実行を待つことができます」

とあり、色々試しましたが超初心者故新規追加時ではうまく行きません。

本当ですね、追加だと待ってくれないですね。。すみません。

下記1行に書き換えてみてください。アラート部分も非同期で待ってくれるようになると思います。

await navigator.clipboard.writeText(fileName).then(async resp => { await swal(alert) });

 

nabe さま

早速書き換えて(△!出ますが)動作確認しましたところ、正常に動作いたしました。

最後までご教示下さいましてありがとうございます。

また機会がありましたら宜しくお願い致します。

了

nabe さま

了 としましたが、、、

汎用性があるコードなので、別のアプリのJSEditにコピペし、SweatAlertをv2.1.2読み込み

実行保存すると、追加時も編集時も以下のエラー(赤ペン先生)が出ます。

エラー
レコードを再読み込みしてください。編集中に、ほかのユーザーがレコードを更新しました。
(GAIA_UN03 CkIVbDal0g2kcPI1obuv)

これの回避方法がまったくもってわかりません。

弱りました・・・ご教示いただければ幸いです。