申請内容の入力時、独自に自動計算を行う
数量や単価など、パーツの値を変更した際に金額を算出するサンプルをご紹介します。
本サンプルでは、入力された数量と単価から金額を算出し、税率や端数計算もあわせて行っています。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
動作イメージ
利用するイベント
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
パーツ名 | パーツID | パーツタイプ | 補足 |
数量 | fidQuantity | テキスト（一行）パーツ | 数値型 |
単価 | fidUnitPrice | テキスト（一行）パーツ | 金額型 |
税率 | fidTax | リストメニューパーツ | リストの値：8%、10％ |
端数処理 | fidRounding | リストメニューパーツ | リストの値：四捨五入、切り捨て、切り上げ |
税抜価格 | fidPrice | テキスト（一行）パーツ | 経路設定で編集不可 |
税込価格 | fidPriceTax | テキスト（一行）パーツ | 経路設定で編集不可 |
カスタマイズコード
カスタマイズコードCopied!
(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. 数量、単価、税率、端数処理の値が変更されると金額が算出されます。