(著者:落合 雄一)
はじめに
これまで、はじめようシリーズでは一覧画面と詳細画面を中心に基本的なデータ参照を利用する方法を紹介してきました。今回は、簡単な更新処理に挑戦したいと思います!o(*⌒O⌒)bファイトッ!!
それでは、kintoneの計算フィールドを使った自動計算を設定で出来ない以下のような計算をJavaScriptカスタマイズで実現してみましょう(^^♪
- 商品の単価と個数から、合計金額を算出
- 合計金額が¥5,000以上なら、10%割引
- 合計金額が¥10,000以上なら、20%割引
アプリの準備
さっそく、今回利用するアプリを準備しましょう(*^_^*)
フィールド名 |
フィールドタイプ |
フィールドコード |
備考 |
商品名 |
文字列(一行) |
商品名 |
- |
単価 |
数値 |
単価 |
桁区切りを表示する |
個数 |
数値 |
個数 |
必須項目 |
合計 |
数値 |
合計 |
桁区切りを表示する |
kintoneの複数イベント処理
今までの例では、複数のイベントで同じ処理を行うケースは紹介してきませんでしたが、これはそんなに難しい事ではありません。kintone.events.on()の第1引数: event には配列で複数のイベントタイプを指定する事が出来ますので、これを以下の2つのイベントで使ってみましょう(^^♪
簡単ですね(^^)
フィールドの値を書き換える
ドキュメントには以下のように記載されています。
ハンドラーが record オブジェクトのフィールドの値を書き換えて event オブジェクトを return した場合、その値でフィールドの値を更新します。
- PCとモバイルで利用できます。
- スペースに貼りつけたアプリには利用できません。
- フィールドの編集を不可にしても、値を書き換えることができます。
- 編集権限のないフィールドの値を書き換えた場合はフォームには反映されません。
- 最後のハンドラーが return しない場合、フィールドの値を更新しません。
- 複数のハンドラーが登録されている場合、最後のハンドラーが return した戻り値を基準に反映されます。
特に、「最後のハンドラーが return しない場合、フィールドの値を更新しません。」は覚えておいてくださいφ( ̄ー ̄ )メモメモ
更新処理
それでは本題に入りましょう(^^♪
思った通り更新できているのではないでしょうか?
他の条件についても確認してみましょう。
出来ていますね\(*^▽^*)ノ
合計フィールドを編集不可にする
これで、合計の算出が出来ました!!
しかし、kintoneの計算フィールドが編集不可であるように、合計フィールドも編集不可にしたいですね(^^)
こんな時のためにkintoneには、APIがフィールドの編集可/不可を設定するAPIが用意されています。気が利いていますねヾ(●´∀`●)
それでは、合計フィールドを編集不可にしてみましょう(^^♪
最後に
今回はレコードの更新に関するイベントを利用して、簡単な更新処理をしてみました。ただし、このまま使うには、小数を含む値が入力された場合や消費税の計算など足りないところもいくつかあるでしょう。また、作成したイベントは、kintoneで設定された値の制限を評価(バリデーション)する前にイベントが実行されます。そのため、数値以外が入力された時は計算しないようにする処理を入れた方が実用的でしょう(^^)
また、kintoneでは一覧画面での編集も可能ですが、本サンプルでは一覧画面での編集は考慮していないので、実際に運用する際は一覧画面での編集の制御も対応しましょう(^^♪
是非今回扱ったJavaScriptを参考に作ってみてくださいヾ(=´・∀・`=)
今後の皆さんの参考のため、関連するいくつかのTipsやサンプルをご紹介しますのであわせてご確認ください。
- レコード追加時にテーブルへ初期値を入れる!
- フィールドの文字数をカウントしてみよう!
- タイトルに「名前+日付」を結合してみよう!
- 年次ごとの自動採番を行うワザ
- 顧客ごとの自動採番
- フィールドの入力不可をボタンで完全制御!
それでは、また次回お会いしましょう。
Let’s kintoneカスタマイズ\(^o^)/
このTipsは、2022年7月版で確認したものになります。
<<第7回 カスタマイズビューを利用してみよう | 第9回 kintone REST APIを利用したレコード追加>>
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/13/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
ものすごく初歩的な質問ですみません。
日付のフィールドに本日の日付を自動で入力されるようにしたい場合。
下記のような書き方で表示されません。何が問題なのでしょうか?
(function () {
"use strict";
kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function (event){
var record = event.record;
var hiduke = new Date();
var year = hiduke.getFullYear();
var month = hiduke.getMonth()+1;
var day = hiduke.getDate();
Ryuta Saitoさん
kintone.events.on
のイベントに['app.record.create.submit', 'app.record.edit.submit']
が指定されています。これは、保存前に実行するイベントです。
追加・編集画面表示時に初期値として入れたい場合は、
['app.record.create.show', 'app.record.edit.show']
を指定してください!いつもわかりやすい解説ありがとうございます。
文字列(1行)フィールドの自動計算でも似たようなことができました。
一応共有いたします。
なにかのお役に立てれば幸いです。