複数のイベントを登録する

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

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

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

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

はじめに結論

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

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

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

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

(() => {
  const text = 'イベント1つ目';

  kintone.events.on(['app.record.index.show', 'app.record.detail.show'], (event) => {
    console.log(text); //イベント1つ目
    return event;
  });
})();

(() => {
  const text = 'イベント2つ目'; // 同じ変数名でもエラーにはならない

  kintone.events.on(['app.record.create.show'], (event) => {
    console.log(text); //イベント2つ目
    return event;
  });
})();

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

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

(() => {
  const text = '共有の変数';

  let initialValue;

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    console.log(text); // 共有の変数

    initialValue = event.record['フィールド'].value;

    return event;
  });

  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
    console.log(text); // 共有の変数

    if (initialValue !== event.record['フィールド'].value) {
      console.log('「フィールド」の値が変更されました！');
    }

    return event;
  });
})();

まとめ

• 1 つのファイルにいくつでも kintone.events.on を記述して良い
• 即時関数で囲う範囲によって、変数の共有有無を制御できる
• グローバル変数を使うことなく、レコード編集開始時と終了時の差分を簡単に判別できる