複数パーツの入力状態によって、独自に必須チェックを行う

JavaScript API を利用して、複数のパーツの入力値で独自に必須チェックを行うサンプルを紹介します。
ここでは、明細に配置した商品名、数量、単価が、全て入力済か未入力となっていない場合にメッセージを表示します。

サンプルについて

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

利用するイベント

• 申請画面イベント - 申請内容確認

サンプルフォーム

パーツID	パーツタイプ	補足
-	テーブルパーツ	行数は任意
fidProductName	テキスト（一行）パーツ	商品名（テーブルの1列目）
fidQuantity	テキスト（一行）パーツ - 数値	数量（テーブルの2列目）
fidUnitPrice	テキスト（一行）パーツ - 金額	単価（テーブルの3列目）
fidPrice	テキスト（一行）パーツ - 金額	金額（テーブルの4列目） ※1 独自に計算して設定する ※2 経路で編集不可に設定

カスタマイズコード

(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. [申請内容確認]をクリックすると、明細の入力状態がチェックされます。
    商品名・数量・単価が全て入力されている、もしくは未入力以外の場合にメッセージが表示されます。