通常フォームの明細に独自に行数を表示する

JavaScript API の 申請入力画面イベント を利用して、独自に明細の行数を設定するサンプルをご紹介します。

サンプルについて

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

サンプルフォーム

サンプルで利用する通常フォームには、以下のパーツを配置しています。

パーツID	パーツタイプ	補足
-	テーブルパーツ	行数は任意
fidRowNo	テキスト（一行）パーツ	数値 明細行数（テーブルの1列目）
fidText	テキスト（一行）パーツ	任意のテキスト入力（テーブルの2列目）

カスタマイズコード

(function () {

  'use strict';

  /**
   * 明細のテキスト変更時、申請内容確認ボタンクリックイベント
   */
  collaboflow.events.on(['request.input.fidText.change', 'request.input.check'], function(e) {

    // 明細行の値を取得
    const rows = e.parts['tbl_1'].value;

    // 1行目から順番に明細行数へ値を設定する
    for (let rowIndex = 0, rowLength = rows.length; rowIndex < rowLength; rowIndex++) {
      let row = rows[rowIndex];
      row['fidRowNo'].value = rowIndex + 1;
    }
  });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要な項目を配置します。
   ※当サンプルでは1列のみとなっていますが、任意に列を追加いただいて構いません。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 先で作成したフォームを選択し、明細行数を編集不可にします。
   
8. 任意に経路アイテムを配置して、経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 任意に行数などを増やします。
11. テキスト列の入力後に行数が設定されます。
12. 「申請内容確認」ボタンをクリックすると、行数が再設定されます。