計算結果の小数をカンマ区切りにする

計算結果の小数をカンマ区切りにするサンプルをご紹介します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するイベント

• 申請入力画面 - パーツ値変更イベント

サンプルフォーム

パーツID	パーツタイプ	補足
fidQuantity	テキスト（一行）パーツ	タイプ：数値型
fidPrice	テキスト（一行）パーツ	タイプ：金額型
fidTotalAmount	テキスト（一行）パーツ	タイプ：ノーマル

注意点

• テキスト（一行）パーツのタイプが数値型・金額型の場合、小数点とカンマ両方を表示することはできません。
• 計算結果は、テキスト（一行）パーツのノーマルタイプを使用しています。
  そのため、kintoneアプリのフィールドが数値の場合、kintone連携アイテムでの連携はできません。

カスタマイズコード

(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. カンマ区切りの金額が表示されます。

動作イメージ