チェックボックスの値で独自に計算を行う
JavaScript API の ［パーツ値変更イベント］(/hc/ja/articles/360000266955) を利用して、独自に計算を行い計算の結果を設定するサンプルをご紹介します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
パーツID | パーツタイプ | 補足 |
fidWithTax | チェックボックスパーツ | 税計算で利用 ※チェック有り：税込み チェック無し：税抜き |
fidQuantity | テキスト（一行）パーツ | 数値 数量 |
fidUnitPrice | テキスト（一行）パーツ | 金額 単価 |
fidPrice | テキスト（一行）パーツ | 金額 金額 ※経路設定で編集不可に設定 |
カスタマイズコード
カスタマイズコードCopied!
(function () {
'use strict';
// チェックボックス、数量、単価変更 var changeEvents = ['request.input.fidWithTax.change', 'request.input.fidQuantity.change', 'request.input.fidUnitPrice.change'];
/** * 変更イベント */ collaboflow.events.on(changeEvents, function (e) {
const parts = e.parts;
// 数値・金額が空の場合は数値にして格納しとく const quantity = +parts["fidQuantity"].value; const unitPrice = +parts["fidUnitPrice"].value;
if (parts['fidWithTax'].value === '税込み') { // 税込みで計算 parts['fidPrice'].value = quantity * unitPrice * 1.08; return; }
parts['fidPrice'].value = quantity * unitPrice;
});
})();動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規にフォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。 
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 先で作成したフォームを選択し、金額は編集不可にします。 
8. 任意に経路アイテムを配置して、経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. チェックボックス、数量、金額の値を変更すると、金額に計算結果が反映されます。 