項目ボタン押下時の処理を自分で書く

最終更新日: 2023年6月30日
R8 | R9

例

項目へのボタンの配置方法は「別項目をグループとして扱い、値をまとめてコピーする」をお読みください。

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

ここでいう "JavaScript" は、サーバサイドではなく、Webブラウザで動作するものです。
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 項目の入力欄へ合計値をセットする
    });
  });
});