Ribbit works
記事のトップ画像

1つのJavaScriptファイルに複数のkintone.events.onを登録する

kintoneJavaScript

last modified date2022-2-24

publish date2021-7-5

こんにちはリビットです。

KintoneへカスタマイズしたJavaScriptを任意のタイミングで実行させるためには、kintone.events.on関数への登録が必要です。

ただカスタマイズを拡張していくと、1つのイベントだけでは機能を実現できず、複数回kintone.events.onを使ってイベントを登録しないといけない場合も出てくると思います。

今回はそういった場合のJavaScriptファイルの記述方法を紹介します。

ちなみにkintone.events.onを複数書かなくても効率よくイベントを登録する方法を別の記事で紹介しているので、よろしければご覧ください。

はじめに

kintoneに反映するjavascriptファイルについて、ファイルを分割することで発生する制約はありますが、同一ファイルで記述することで発生する制約はありません

即時関数を使っておけばグローバル汚染もありませんし、深く考えず複数の実装を縦に並べれば完成です。

即時関数を2つに分けるパターン

即時関数を2つに分ければ、それぞれのイベント内で定義した変数が競合することはありません。逆に複数のイベント間で変数を共有したい場合は、後述する即時関数1つのパターンを使ってください。

(function () {

  const text = "イベント1つ目";

  kintone.events.on(['app.record.index.show', 'app.record.detail.show'], function (event) {

    console.log(text) //イベント1つ目
    return event;
  });
})();

(function () {

  const text = "イベント2つ目"; // エラーにはならない

  kintone.events.on(['app.record.create.show'], function (event) {

    console.log(text) //イベント2つ目
    return event;
  });
})();

1つの即時関数で実現するパターン

1つの即時関数に複数のイベントを登録すれば、グローバル変数を使用せずイベント間で変数を共有できます。 レコード作成時のフィールドの値を保持し、レコード保存時に反映するような処理もこれで実現できます。

(function () {
  const text = "共有の変数";

  kintone.events.on(['app.record.index.show', 'app.record.detail.show'], function (event) {

    console.log(text); // 共有の変数

    return event;
  });

  kintone.events.on(['app.record.create.show'], function (event) {

    console.log(text); // 共有の変数

    return event;
  });
})();