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

Tips

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

固定リンクがコピーされました

更新日：2023年02月01日

はじめに

固定リンクがコピーされました

今回は、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;
  });
})();