サポート > Wagby Developer Network(R8) > 高度な使い方 > 項目のオリジナルボタン押下で JavaScript を動作させる

「入力制御 > 別項目をグループとして扱い、値をまとめてコピーする」で用意されたボタンにオリジナル処理を記述することができます。

項目へのボタンの配置方法はこちらをお読みください。

ボタン機能に「オリジナル」を指定し、ボタン押下時の処理を JavaScript で記述することができます。ここでは Wagby が内部で利用している Dojotoolkit ライブラリを使ったサンプルを紹介します。

ここの "JavaScript" は、サーバサイドではなく、Webブラウザで動作するものです。「業務ロジック」の説明にある「クライアントサイドJavaScript」に相当します。
Dojotoolkit は Wagby で利用する各種の入力部品を提供しているオープンソースのライブラリです。

ボタンを押すと計算を行う

ボタン押下により、item1 と item2 の入力値を加算したものを item3 にセットするサンプルです。Wagbyの「自動計算」設定と異なり、式を直接、JavaScript で記述します。サーバとの通信は発生せず、クライアント(Webブラウザ)だけで処理されます。

ここではモデル model1 に対して、MyInsertModel1.js を用意した例です。これを customize/webapp/model1 フォルダに保存してビルドしてください。(モデルにあわせて MyXX.js ファイル名を用意してください。)

require(["dijit/registry", "dojo/ready"], function(registry, ready) {
  // 画面表示時に対象の入力項目を取得してイベント処理を設定する
  ready(function() {
    var item1Widget = registry.byId("model1_p$002fitem1"); // item1 項目の入力欄
    var item2Widget = registry.byId("model1_p$002fitem2"); // item2 項目の入力欄
    var item3Widget = registry.byId("model1_p$002fitem3"); // item3 項目の入力欄
    var btnItem3 = registry.byId("item3_nop_1"); // item3 項目のボタン
    // item3 項目のボタン押下時の処理を記述
    btnItem3.on("click", function (){
      var item1Value = item1Widget.get("value"); // item1 項目の入力値を取得
      var item2Value = item2Widget.get("value"); // item2 項目の入力値を取得
      item3Widget.set("value", item1Value + item2Value); // item3 項目の入力欄へ合計値をセットする
    });
  });
});

Dojotoolkit ライブラリの使い方は標準サポートの対象外となります。具体的なカスタマイズコードの作成や添削は Wagby パートナーにご相談ください。

Wagby Developer Day 2018