変更された行の情報を取得して合計を変更してみよう

フォローする

はじめに

今回は、2016年5月のアップデートで追加された、レコード編集イベントでの「変更されたフィールドやテーブル内の行オブジェクトを取得する」について紹介したいと思います。

アップデート以前、変更のあったテーブル内の行オブジェクトやテーブル外のオブジェクトを取得するには、変更前の情報を別の配列に持っておき、現在のフィールド情報との比較を行って行を検出するような実装が必要でした。
しかし、今回のアップデートにより、変更された行のみの値を検出しシンプルなコードで処理ができるようになります。

 

アプリの準備

今回は、売り上げの集計を行うアプリを作成し、ラジオボタンで集計結果を変更するように下記のレコードの登録を行いました。

フィールドタイプ フィールド名 フィールドコード
日付<テーブル>> 日付 日付
数値(1行)<テーブル> 単価 単価
数値(1行)<テーブル> 個数 個数
ラジオボタン<テーブル> 単位 '個','ケース'
数値(1行)<テーブル> 合計 合計

 

「日付」「単価」「個数」「ラジオボタン」「合計」のフィールドを作成したら、「Table」という名前のテーブルでまとめておきます。

 

JavaScript

今回は、レコード登録画面とレコード編集画面にて「単価」「個数」「ラジオボタン」の3つのフィールドの値の変化に対応できるように、複数のイベントを登録しています。

  • 'app.record.edit.change.単位'
  • 'app.record.edit.change.単価'
  • 'app.record.edit.change.個数'
  • 'app.record.create.change.単位'
  • 'app.record.create.change.単価'
  • 'app.record.create.change.個数'

今回のアップデートに伴うJavaScriptでやりたいことは…

・計算フィールドで対応しきれないフィールドの値の計算処理
・フィールドの値を入力/変更した際に合計値を更新する

以上の2点です。

なお、ラジオボタンで設定した「個」と「ケース」については、売り上げを計算するときに個別での販売と12個入りのパッケージの2通りで計算するシチュエーションを想定しました。 

それでは下記にて、今回作成したサンプルコードを紹介します。

動作確認

アプリ画面を開いて、各項目に数値を入力します

 

「単価」と「個数」のフィールドに値を入力すると「合計」に計算結果が表示されます。

 

次に、ラジオボタンの値に応じて合計の値が変化するのか確認します。

ラジオボタンの「単位」をケースに変更してみると・・・

 

合計の値が変更できていることが確認できます。
今回想定している、1ケースごとに12個入りのパッケージとして計算していることが確認できますね。 

上記の画面は新規作成の手順となりますが、レコードの編集時にも「単価」「個数」「単位」の変更に伴って合計の値が変更されることも確認してみてください。

なお、今回のカスタマイズに加えて、「合計」のフィールドに入力不可を付けると、間違った手入力が防げてより使いやすくなるかと思います。

このTipsは、2016年5月版で確認したものになります。

その他


関連Tips

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
鈴木敏夫

ラジオボタン のフィールドコードは[単位]等にすべきですよね??

そのうえで、eventsの中身と本文の[ラジオボタン]の部分を[単位]に

変更してもこのコードは動かないんですが???

var radio = table_row.value['単位].value; //<<<変更
r price = table_row.value['単価'].value;

以下同じ

.value['単位'[.value のところでエラーが発生します。
[Cannot read property 'value' of null

初心者ゆえ何か見逃しているところがあるやもしれません。
熟達の諸氏のアドバイスを御願いします。

Avatar
cybozu Development team
いつもご利用いただきありがとうございます。
developer network運営チームです。
 
>ラジオボタン のフィールドコードは[単位]等にすべきですよね??
こちら、記事内でのフィールド名とサンプルコードに乖離がございました。
ご指摘いただきました通り、ラジオボタンとして設置したフィールド名を
['単位']とし、サンプルコードを修正いたしました。
 
次にご質問いただきましたコードにつきまして
>var radio = table_row.value['単位].value; //<<<変更
こちらは、単位の表記にシングルクォートを追加いただき
['単位']と修正のうえ、再度お試しください。
 
また
>.value['単位'[.value のところでエラーが発生します。
こちらは .value['単位'].value ;とかっこブラケットを閉じた表記にて
お試しいただきたくお願いいたします。
Avatar
Mike
 ['app.record.edit.change.A',
  'app.record.create.change.A']

上記と同じく設定ましたが、edit.changeは取れますがcreate.changeは取れません。

試用期間のせいでしょうか?

Avatar
cybozu Development team

Mike様

いつもお世話になっております。
cybozu.com developer network事務局です。

ご質問いただいた内容ですが、試用期間中の環境はスタンダード
コースの内容でご利用いただける環境となっておりますので、
こちらの記事の内容についても適用可能となっております。

記事の内容で、再度手元の環境で試してみましたが、変更画面
(edit)だけでなく、登録画面(create)でも動くことを確認
いたしました。

下記のように記載をして動かない場合は、この部分以外が原因で
動かないことが考えられます。
var events = [
'app.record.edit.change.A',
'app.record.create.change.A'
];

再度、ご確認よろしくお願い致します。

Avatar
Mike
 
ご回答ありがとうございました。
 
テーブル行追加削除イベントを取りたかったのですが、

こちらを見ながら作って行追加削除はcreateをつければよいかと思ってしまいました。

['app.record.edit.change.A',
          'app.record.edit.change.Table',
          'app.record.create.change.A', 
          'app.record.create.change.Table']
正しくはこうでした。
ログインしてコメントを残してください。
Powered by Zendesk