第 8 回 簡単な更新処理に挑戦してみよう

著者名: 落合 雄一 (External link)

目次

information

初めて kintone をカスタマイズする人が kintone API の基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API

はじめに

これまで、はじめようシリーズでは一覧画面と詳細画面を中心に基本的なデータ参照を利用する方法を紹介してきました。
今回は、簡単な更新処理に挑戦したいと思います!

それでは、kintone の計算フィールドを使った 計算式を設定 (External link) では実現できない以下のような計算を JavaScript カスタマイズで実現してみましょう。

  1. 商品の単価と個数から、合計金額を算出
  2. 合計金額が¥5,000 以上なら、10%割り引き
  3. 合計金額が¥10,000 以上なら、20%割り引き

2020 年 1 月版の kintone から、計算式に追加された IF 関数 (External link) を使うことで、この記事で紹介している計算は標準機能でできるようになりました。

アプリの準備

さっそく、今回利用するアプリを準備しましょう。

フィールド名 フィールドタイプ フィールドコード 備考
商品名 文字列(1 行) 商品名 -
単価 数値 単価 桁区切りを表示する
  • 必須項目にする
  • 値の制限:最小 0
  • 少数点以下の表示桁数:0
  • 単位記号:¥(前に付ける)
個数 数値 個数 必須項目
  • 値の制限:最小 0
  • 少数点以下の表示桁数:0
合計 数値 合計 桁区切りを表示する
  • 値の制限:最小 0
  • 少数点以下の表示桁数:0
  • 単位記号:¥(前に付ける)

kintone の複数イベント処理

今までの例では、複数のイベントで同じ処理を行うケースは紹介してきませんでしたが、複数イベントで同じ処理を行うことは難しくありません。
kintone.events.on() の第 1 引数 event には配列で複数のイベントタイプを指定できますので、これを以下の 2 つのイベントで使ってみましょう。

1
2
3
4
5
6
7
8
(() => {
  'use strict';

  // レコード詳細画面が表示された時のイベント
  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event)=> {
    // ここに具体的な処理の内容を記述する
  });
})();

簡単ですね。

フィールドの値を書き換える

ドキュメントの フィールドの値を書き換える には以下のように記載されています。

ハンドラーが record オブジェクトのフィールドの値を書き換えて event オブジェクトを return した場合、その値でフィールドの値を更新します。

  • PC とモバイルで利用できます。
  • スペースに貼りつけたアプリには利用できません。
  • フィールドの編集を不可にしても、値を書き換えることができます。
  • 編集権限のないフィールドの値を書き換えた場合はフォームには反映されません。
  • 最後のハンドラーが return しない場合、フィールドの値を更新しません。
  • 複数のハンドラーが登録されている場合、最後のハンドラーが return した戻り値を基準に反映されます。

特に、「最後のハンドラーが return しない場合、フィールドの値を更新しません」は覚えておいてください。

更新処理

それでは本題に入りましょう。

 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
(() => {
  'use strict';
  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
    const record = event.record;
    const price = record['単価'].value;
    const number = record['個数'].value;

    // 合計金額の算出
    let subTotal = price * number;

    // ¥10,000以上は20%割引
    if (subTotal >= 10000) {
      subTotal = subTotal / 100 * 80;

      // ¥5,000以上なら10%割引
    } else if (subTotal >= 5000) {
      subTotal = subTotal / 100 * 90;

    }

    record['合計'].value = subTotal;

    return event;
  });
})();

思ったとおり更新できているのではないでしょうか?
他の条件についても確認してみましょう。

できていますね。

合計フィールドを編集不可にする

これで、合計の算出ができました!
しかし、kintone の計算フィールドが編集不可になっているように、合計フィールドも編集不可にしたいですね。
こんな時のために kintone には、API がフィールドの編集可/不可を設定する API が用意されています。
フィールドの編集可/不可を設定する

それでは、合計フィールドを編集不可にしてみましょう。

 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
(() => {
  'use strict';
  kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], (event) => {
    const record = event.record;
    const price = record['単価'].value;
    const number = record['個数'].value;
    let subTotal = price * number;

    if (subTotal >= 10000) {
      subTotal = subTotal / 100 * 80;
    } else if (subTotal >= 5000) {
      subTotal = subTotal / 100 * 90;
    }
    record['合計'].value = subTotal;

    return event;
  });

  // レコード追加画面が表示された時, レコード編集画面が表示された時のイベント
  kintone.events.on(['app.record.edit.show', 'app.record.create.show'], (event) => {
    // 「合計」フィールドの入力を制限
    event.record['合計'].disabled = true;

    return event;
  });
})();

最後に

今回はレコードの更新に関するイベントを利用して、簡単な更新処理をしてみました。
ただし、このまま使うには、小数を含む値が入力された場合や消費税の計算など足りないところもいくつかあるでしょう。
また、作成したイベントは、kintone で設定された値の制限を評価(バリデーション)する前にイベントが実行されます。
そのため、数値以外が入力された時は計算しないようにする処理を入れた方が実用的でしょう。

また、kintone では一覧画面での編集も可能ですが、本サンプルでは一覧画面での編集は考慮していないので、実際に運用する際は一覧画面での編集の制御も対応しましょう。

ぜひ今回扱った JavaScript を参考に作ってみてください。
今後の皆さんの参考のため、関連するいくつかの Tips やサンプルを紹介しますので合わせて確認してください。

information

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

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/13/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。