複数のイベントを登録する
kintone へカスタマイズした JavaScript を任意のタイミングで実行させるためには、kintone.events.on関数への登録が必要です。
ただカスタマイズを拡張していくと、1 つのイベントだけでは機能を実現できず、複数回kintone.events.onを使ってイベントを登録しないといけない場合も出てくると思います。
今回はそういった場合の JavaScript ファイルの記述方法を紹介します。
ちなみに kintone.events.on を複数書かなくても効率よくイベントを登録する方法を以下のページで紹介しているので、よろしければご覧ください。
kintone のイベントを俯瞰する
複数のイベントを登録する前に、まずは kintone がどのような画面でどのようなイベントを発火するのかを把握しておくと、コードを書く際の見通しが格段に良くなります。以下のタイムラインで、画面ごとのイベントの発火順序と、各イベントで利用可能な event オブジェクトのプロパティを確認できます。
kintone イベントタイムライン
画面シナリオを選び、各イベントをクリックすると、利用できる event プロパティとサンプルコードを確認できます。
レコード新規作成画面の表示から、ユーザーが値を入力し、保存するまでに発火するイベントを並べています。
- 画面表示画面表示
*.create.show - 値変更フィールド変更
*.create.change.{フィールドコード} - 保存前保存ボタン
*.create.submit - 完了後保存成功
*.create.submit.success
app.record.create.show- 発火条件
- レコード新規作成画面が表示されたとき
- キャンセル
- 中断不可
- 非同期
- async/await 対応
新規作成画面が表示された直後に 1 度だけ発火します。フィールドの初期値設定や、UI のカスタマイズの開始位置として最もよく使われます。
event.type'app.record.create.show'発火したイベント名と同じ文字列が入ります。
event.appIdnumberアプリ ID。
event.recordIdnumber | null新規作成時はまだレコードが存在しないため null になります。
event.recordRecord<string, FieldValue>レコードのフィールド情報。値を書き換えると画面に反映されます。
kintone.events.on('app.record.create.show', (event) => {
// フィールドの初期値を設定
event.record['担当者'].value = [
{ code: kintone.getLoginUser().code }
];
return event;
});はじめに結論
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 を記述して良い
- 即時関数で囲う範囲によって、変数の共有有無を制御できる
- グローバル変数を使うことなく、レコード編集開始時と終了時の差分を簡単に判別できる