申請内容の入力時、独自に自動計算を行う

数量や単価など、パーツの値を変更した際に金額を算出するサンプルをご紹介します。

本サンプルでは、入力された数量と単価から金額を算出し、税率や端数計算もあわせて行っています。

サンプルについて

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

動作イメージ

利用するイベント

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

サンプルフォーム

サンプルで利用するフォームには、以下のパーツを配置しています。

パーツ名	パーツID	パーツタイプ	補足
数量	fidQuantity	テキスト（一行）パーツ	数値型
単価	fidUnitPrice	テキスト（一行）パーツ	金額型
税率	fidTax	リストメニューパーツ	リストの値：8%、10％
端数処理	fidRounding	リストメニューパーツ	リストの値：四捨五入、切り捨て、切り上げ
税抜価格	fidPrice	テキスト（一行）パーツ	経路設定で編集不可
税込価格	fidPriceTax	テキスト（一行）パーツ	経路設定で編集不可

カスタマイズコード

(function () {
  'use strict';

  /**
   * 金額の端数処理を行う独自関数です。
   *
   * @param {*} price
   * @param {*} fractionType
   * @returns
   */
  function calculateFraction(price, fractionType) {
    // 算出結果
    let calculationResults = 0;

    switch(fractionType) {
        case '四捨五入':
            calculationResults = Math.round(price);
            break;
        case '切り上げ':
            calculationResults = Math.ceil(price);
            break;
        case '切り捨て':
            calculationResults = Math.floor(price);
            break;
        default:
            calculationResults = Math.round(price);
            break;
    }

    return calculationResults;
  }

  // 変更イベント
  const changeEventNames = [
    'request.input.fidQuantity.change', 
    'request.input.fidUnitPrice.change',
    'request.input.fidTax.change', 
    'request.input.fidRounding.change'];

  collaboflow.events.on(changeEventNames, function (changeEvent) {

    // パーツのデータ
    const parts = changeEvent.parts;

    // 数量と金額の値を取得
    const quantity = parts['fidQuantity'].value;
    const fidUnitPrice = parts['fidUnitPrice'].value;

    // 数量と金額の値をチェックして計算しない場合は、0でクリアする
    if (quantity <= 0 || fidUnitPrice <= 0) {
      parts['fidPrice'].value = 0;
      parts['fidPriceTax'].value = 0;
      return;
    }

    // 端数処理の種別
    const fractionType = parts['fidRounding'].value;

    // 税抜価格の算出
    const price = quantity * fidUnitPrice;

    // 端数処理して値を設定する
    parts['fidPrice'].value = calculateFraction(price, fractionType).toLocaleString();


    // 税率を算出
    const tax = parts['fidTax'].value.replace('%', '');
    const taxRatio = 1 + (tax / 100);

    // 税込価格の算出
    const priceTax = price * taxRatio;

    // 端数処理して値を設定する
    parts['fidPriceTax'].value = calculateFraction(priceTax, fractionType).toLocaleString();
  });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 新規文書から作成した経路名をクリックします。
8. 申請画面が表示されます。
9. 数量、単価、税率、端数処理の値が変更されると金額が算出されます。