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

目次

はじめに

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

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

アプリの準備

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

フィールドタイプ フィールド名 フィールドコード 備考
テーブル テーブル テーブル この記事では「テーブル名を表示しない」にチェックを入れています。
日付 日付 日付
数値 単価 単価
数値 個数 個数
ラジオボタン 単位 単位 オプション
  • ケース
数値 合計 合計

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

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
 * Changed row in table
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';
  const events = [
    'app.record.edit.change.単位',
    'app.record.edit.change.単価',
    'app.record.edit.change.個数',
    'app.record.create.change.単位',
    'app.record.create.change.単価',
    'app.record.create.change.個数'
  ];
  kintone.events.on(events, (event) => {

    // 変更されたテーブル行のオブジェクトを取得
    const table_row = event.changes.row;

    // changeのあった行で計算し合計に代入
    const radio = table_row.value['単位'].value;
    const price = table_row.value['単価'].value;
    const number = table_row.value['個数'].value;
    const total = table_row.value['合計'];
    // 単位['個']
    if (radio === '個') {
      total.value = price * number;
    } else {
      // 単位['ケース']
      total.value = price * number * 12;
    }

    return event;
  });
})();

動作確認

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

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

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

ラジオボタンの「単位」をケースに変更します。

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

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

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

information

この Tips は、2020 年 4 月版 kintone で動作を確認しています。