JavaScript API の [パーツ値変更イベント](/hc/ja/articles/360000266955) を利用して、独自に計算を行い計算の結果を設定するサンプルをご紹介します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
サンプルフォーム
サンプルで利用するフォームには、以下のパーツを配置しています。
パーツID | パーツタイプ | 補足 |
---|---|---|
fidWithTax | チェックボックスパーツ | 税計算で利用 ※チェック有り:税込み チェック無し:税抜き |
fidQuantity | テキスト(一行)パーツ | 数値 数量 |
fidUnitPrice | テキスト(一行)パーツ | 金額 単価 |
fidPrice | テキスト(一行)パーツ | 金額 金額 ※経路設定で編集不可に設定 |
カスタマイズコード
(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;
});
})();
動作の確認手順
- サンプルのカスタマイズコードをjsファイルに保存します。
- アプリ設定>フォーム設定から新規にフォームを作成します。
- サンプルフォームに、先で記載されている必要な項目を配置します。
- サンプルフォームを再度表示し、カスタマイズタブを表示します。
- 保存したファイルをアップロードします。
- アプリ設定>経路設定から新規に経路を作成します。
- 先で作成したフォームを選択し、金額は編集不可にします。
- 任意に経路アイテムを配置して、経路を作成します。
- 新規文書から作成した経路名をクリックします。
- チェックボックス、数量、金額の値を変更すると、金額に計算結果が反映されます。
コメント
0件のコメント
記事コメントは受け付けていません。