計算結果の小数をカンマ区切りにする
計算結果の小数をカンマ区切りにするサンプルをご紹介します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
パーツID | パーツタイプ | 補足 |
fidQuantity | テキスト（一行）パーツ | タイプ：数値型 |
fidPrice | テキスト（一行）パーツ | タイプ：金額型 |
fidTotalAmount | テキスト（一行）パーツ | タイプ：ノーマル |
注意点
テキスト（一行）パーツのタイプが数値型・金額型の場合、小数点とカンマ両方を表示することはできません。
計算結果は、テキスト（一行）パーツのノーマルタイプを使用しています。 そのため、kintoneアプリのフィールドが数値の場合、kintone連携アイテムでの連携はできません。
カスタマイズコード
カスタマイズコードCopied!
(function () { 'use strict';
// 数量と単価の値に変更があった場合、計算結果をカンマを区切りにするイベント collaboflow.events.on(['request.input.fidQuantity.change', 'request.input.fidPrice.change'], function (data) {
const parts = data.parts; const quantity = parts['fidQuantity'].value; const price = parts['fidPrice'].value;
// 金額を計算する let totalAmount = quantity * price; // 金額をカンマ区切りにする totalAmount = totalAmount.toLocaleString('ja-JP');
parts['fidTotalAmount'].value = totalAmount;
});})();動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. 数量と単価を入力します。
10. カンマ区切りの金額が表示されます。
動作イメージ
