cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

はじめに

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

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

 

アプリの準備

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

フィールドタイプ フィールド名 フィールドコード 備考
テーブル テーブル テーブル

この記事では「テーブル名を表示しない」にチェックを入れています。
日付 日付 日付  
数値 単価 単価  
数値 個数 個数  
ラジオボタン 単位 単位

オプション

  • 個
  • ケース
数値 合計 合計  

 

subtable_sample1.png

subtable_detail.png

「テーブル」フィールドを作成し、「日付」「単価」「個数」「ラジオボタン」「合計」のフィールドを配置します。

 

JavaScript

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

  • '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通りで計算するシチュエーションを想定しました。 

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

動作確認

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

 

subtable_sample2.png

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

 

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

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

subtable_sample.png

 

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

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

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

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

その他

関連Tips

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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']
正しくはこうでした。
Avatar
吉田　雄策

下記コードで実行しようとしたのですが、うまく動きません。

何かKintone上で環境設定などはいるのでしょうか？

(function() {

"use strict";

var events = [
'app.record.edit.change.区分',

'app.record.edit.change.単価',

'app.record.edit.change.清算金額1',

'app.record.create.change.区分',

'app.record.create.change.単価',

'app.record.create.change.清算金額',]

kintone.events.on(events, function(event) {

// "Table"のレコードオブジェクトを取得

var table_row = event.changes.row;

//changeのあった行で計算し清算金額に代入

var radio = table_row.value['区分'].value;
var price = table_row.value['単価'].value;
var total = table_row.value['清算金額'];

//区分['片道']

if (radio === '往復') {
total.value = price * 2;

} else {

//区分['片道']
total.value = price;

}

return event;});

});

Avatar
cybozu Development team

吉田　雄策 様

お世話になっております。
cybozu developer network運営事務局でございます。

こちらのコメント欄ですが、記事への使い勝手や不具合報告などのフィードバック目的となっております。
別シナリオでの書き方のご相談は、コミュニティ をご活用ください。
よろしくお願いいたします。

サインインしてコメントを残してください。