複数パーツの入力状態によって、独自に必須チェックを行う
JavaScript API を利用して、複数のパーツの入力値で独自に必須チェックを行うサンプルを紹介します。
ここでは、明細に配置した商品名、数量、単価が、全て入力済か未入力となっていない場合にメッセージを表示します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント
申請入力画面イベント（申請内容確認）
サンプルフォーム
パーツID | パーツタイプ | 補足 |
- | テーブルパーツ | 行数は任意 |
fidProductName | テキスト（一行）パーツ | 商品名（テーブルの1列目） |
fidQuantity | テキスト（一行）パーツ - 数値 | 数量（テーブルの2列目） |
fidUnitPrice | テキスト（一行）パーツ - 金額 | 単価（テーブルの3列目） |
fidPrice | テキスト（一行）パーツ - 金額 | 金額（テーブルの4列目） ※1 独自に計算して設定する ※2 経路で編集不可に設定 |
カスタマイズコード
カスタマイズコードCopied!
(function() { 'use strict';
/** * 内容確認イベント */ collaboflow.events.on('request.input.check', function(e) {
// 明細行の値を取得 const rows = e.parts['tbl_1'].value;
// エラーメッセージ用 const errorMessages = [];
// 1行ずつ商品名、数量、単価の入力をチェックする for (let rowIndex = 0, rowLength = rows.length; rowIndex < rowLength; rowIndex++) { let row = rows[rowIndex];
// 行毎のパーツ値 let productName = row['fidProductName'].value.trim(); // 商品名 let quantity = row['fidQuantity'].value; // 数量 let unitPrice = row['fidUnitPrice'].value; // 単価
// 全て空の場合、金額をクリアして次行へ if (productName === '' && quantity === '' && unitPrice === '') { row['fidPrice'].value = ''; continue; }
// 単価・数量が入力されている場合、金額設定 if (quantity !== '' && unitPrice !== '') { row['fidPrice'].value = quantity * unitPrice; }
if (productName === '') { errorMessages.push(rowIndex + 1 + '行目の商品名が未入力です。'); }
if (quantity === '') { errorMessages.push(rowIndex + 1 + '行目の数量が未入力です。'); }
if (unitPrice === '') { errorMessages.push(rowIndex + 1 + '行目の単価が未入力です。'); } }
// エラーメッセージがなければOK！ if (errorMessages.length === 0) { return true; }
// エラーメッセージを表示して false を返す alert(errorMessages.join('\n')); return false;
});
})();
動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要なパーツを配置します。
4. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 先で作成したフォームを選択し、金額を編集不可にします。
8. 任意に経路アイテムを配置して、経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 明細のパーツを任意に入力します。
11. ［申請内容確認］をクリックすると、明細の入力状態がチェックされます。 商品名・数量・単価が全て入力されている、もしくは未入力以外の場合にメッセージが表示されます。
