第 8 回 簡単な更新処理に挑戦してみよう
初めてkintoneをカスタマイズする人がkintone APIの基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
はじめに
これまで、はじめようシリーズでは一覧画面と詳細画面を中心に基本的なデータ参照を利用する方法を紹介してきました。
今回は、簡単な更新処理に挑戦したいと思います!
それでは、kintoneの計算フィールドを使った 計算式を設定 では実現できない以下のような計算をJavaScriptカスタマイズで実現してみましょう。
- 商品の単価と個数から、合計金額を算出
- 合計金額が¥5,000以上なら、10%割り引き
- 合計金額が¥10,000以上なら、20%割り引き
2020年1月版のkintoneから、計算式に追加された IF 関数 を使うことで、この記事で紹介している計算は標準機能でできるようになりました。
アプリの準備
さっそく、今回利用するアプリを準備しましょう。
フィールド名 | フィールドタイプ | フィールドコード | 備考 |
---|---|---|---|
商品名 | 文字列(1 行) | 商品名 | - |
単価 | 数値 | 単価 | 桁区切りを表示する
|
個数 | 数値 | 個数 | 必須項目
|
合計 | 数値 | 合計 | 桁区切りを表示する
|
kintone の複数イベント処理
今までの例では、複数のイベントで同じ処理を行うケースは紹介してきませんでしたが、複数イベントで同じ処理を行うことは難しくありません。
kintone.events.on()
の第1引数event
には配列で複数のイベントタイプを指定できますので、これを以下の2つのイベントで使ってみましょう。
|
|
簡単ですね。
フィールドの値を書き換える
ドキュメントの フィールドの値を書き換えるには以下のように記載されています。
ハンドラーがrecord
オブジェクトのフィールドの値を書き換えてevent
オブジェクトをreturnした場合、その値でフィールドの値を更新します。
- PCとモバイルで利用できます。
- スペースに貼りつけたアプリには利用できません。
- フィールドの編集を不可にしても、値を書き換えることができます。
- 編集権限のないフィールドの値を書き換えた場合はフォームには反映されません。
- 最後のハンドラーがreturnしない場合、フィールドの値を更新しません。
- 複数のハンドラーが登録されている場合、最後のハンドラーがreturnした戻り値を基準に反映されます。
特に、「最後のハンドラーがreturnしない場合、フィールドの値を更新しません」は覚えておいてください。
更新処理
それでは本題に入りましょう。
|
|
思ったとおり更新できているのではないでしょうか?
他の条件についても確認してみましょう。
できていますね。
合計フィールドを編集不可にする
これで、合計の算出ができました!
しかし、kintoneの計算フィールドが編集不可になっているように、合計フィールドも編集不可にしたいですね。
こんな時のためにkintoneには、APIがフィールドの編集可/不可を設定するAPIが用意されています。
フィールドの編集可/不可を設定する
それでは、合計フィールドを編集不可にしてみましょう。
|
|
最後に
今回はレコードの更新に関するイベントを利用して、簡単な更新処理をしてみました。
ただし、このまま使うには、小数を含む値が入力された場合や消費税の計算など足りないところもいくつかあるでしょう。
また、作成したイベントは、kintoneで設定された値の制限を評価(バリデーション)する前にイベントが実行されます。
そのため、数値以外が入力された時は計算しないようにする処理を入れた方が実用的でしょう。
また、kintoneでは一覧画面での編集も可能ですが、本サンプルでは一覧画面での編集は考慮していないので、実際に運用する際は一覧画面での編集の制御も対応しましょう。
ぜひ今回扱ったJavaScriptを参考に作ってみてください。
今後の皆さんの参考のため、関連するいくつかのTipsやサンプルを紹介しますので合わせて確認してください。
- レコード追加時にテーブルへ初期値を入れる!
- フィールドの文字数をカウントしてみよう!
- タイトルに「名前+日付」を結合してみよう!
- 年次ごとの自動採番を行うワザ
- 顧客ごとの自動採番
- フィールドの入力不可をボタンで完全制御!
このTipsは、2022年7月版kintoneで動作を確認しています。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/13/
ログイン情報は cybozu developer network デモ環境で確認してください。