プリザンター新機能紹介：スクリプト編その2

プリザンター

こんにちは。IISの田口です。
プリザンターに新機能が続々追加！で紹介したプリザンターの新機能について詳しく紹介します。
今回は「Javascriptによるイベントハンドラ追加」について紹介します。

Javascriptによるイベントハンドラ追加

画面上の「分類Aのプルダウンを変更したら○○の処理をしたい」のような変更後イベントは

$(docment).on('change', '#Results_ClassA', function(){
  // 処理
});

のように記述することで実現出来ます。
ですが、「更新後に別テーブルのフラグを更新したい」「新規登録前に独自のバリデーションを追加したい」など、プリザンターの基本機能についてさらにイベント追加したいケースはどうやって追加すれば良いでしょうか？
ボタンクリックイベントは製品側で設定済みですので、うまく実装しないと設定済み処理が消えてしまうかもしれません。
実は私、Javascript（JQuery）に詳しくないので、上記の要件に対応できずにとても困っていました・・・

でも、今回の新機能で一気に解決できます！

イベントハンドラのメソッドが追加！

新規等として以下6つのメソッドが追加されています。
各ボタンや処理内で定義している「data_action」に対してそれぞれのタイミングで動きます。

  1. 検証前　　　　　：$p.events.before_validate_XXXXXX
  2. 検証後　　　　　：$p.events.after_validate_XXXXXX
  3. 送信前　　　　　：$p.events.before_send_XXXXXX
  4. 送信後　　　　　：$p.events.after_send_XXXXXX
  5. レスポンス適用前：$p.events.before_set_XXXXXX
  6. レスポンス適用後：$p.events.after_set_XXXXXX

XXXXXXのところにdata-action属性の値（またはid属性の値）を記述します。

サンプルソースになります。
編集画面の「更新」ボタンクリック時の各タイミングでダイアログを表示する処理を追加することが出来ます。

// 検証前
$p.events.before_validate_Update = function (args) {
    alert('before_validate');
}

// 検証後
$p.events.after_validate_Update = function (args) {
    alert('after_validate');
}

// 送信前
$p.events.before_send_Update = function (args) {
    alert('before_send');
}

// 送信後
$p.events.after_send_Update = function (args) {
    alert('after_send');
}

// レスポンス適用前
$p.events.before_set_Update = function (args) {
    alert('before_set');
}

// レスポンス適用後
$p.events.after_set_Update = function (args) {
    alert('after_set');
}

少し解説

検証前、検証後とは、登録更新時に必須入力チェックなどのバリデーションを行っていますが、その前後のタイミングとなります。
送信前、送信後とは、バリデーションOKでサーバに登録更新内容を送信する前後のタイミングとなります。
レスポンス適用前、レスポンス適用後とは、サーバ送信に内容送信後、正常終了の戻り値で画面内容を更新する前後のタイミングとなります。

これらのメソッドを用いることで

  • 独自バリデーションの追加
  • 更新後に別テーブルの項目の更新や新規レコード追加

などの処理が追加できます。

注意点

送信後およびレスポンス適用後の2つのイベントは、サーバ送信が非同期通信であること、また更新後に別画面に遷移するケースもあるため、場合によっては処理順序が不定になり、処理されない可能性がありますので、実装する際はテストや実環境でのトライアルを重点的に行ってください。

めちゃめちゃ汎用的です！

1番のポイントになりますが、今回の新機能は「data-action」に対してイベントを追加するメソッドになります。
これのどこが汎用的かというと、「data-action」であればどの要素であっても有効であることです。
実はdata-action属性はボタンにだけでなく、他の画面要素にも設定されているケースがあります。
例えば

  • カレンダーやカンバンの表示画面
  • レコードの変更履歴画面

あたりにもdata-action属性がセットされていますので、カンバンやカレンダーでドラッグ＆ドロップでレコードを移動した後や、変更履歴画面を表示した後などにも処理を追加することが出来ます。

最後に　　

IISはプリザンターのスクリプトによるカスタマイズの経験が豊富です。
プリザンター導入に際してカスタマイズをご検討されている方は是非ご相談ください！
またご不明点やご質問などございましたら弊社までお問い合わせください。