通常フォームの明細に独自に行数を表示する
JavaScript API の 申請入力画面イベントを利用して、独自に明細の行数を設定するサンプルをご紹介します。
申請入力画面イベントについては、利用可能な画面、イベントの一覧をご確認ください。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
サンプルフォーム
サンプルで利用する通常フォームには、以下のパーツを配置しています。
パーツID | パーツタイプ | 補足 |
- | テーブルパーツ | 行数は任意 |
fidRowNo | テキスト（一行）パーツ | 数値 明細行数（テーブルの1列目） |
fidText | テキスト（一行）パーツ | 任意のテキスト入力（テーブルの2列目） |
カスタマイズコード
カスタマイズコードCopied!
(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. 「申請内容確認」ボタンをクリックすると、行数が再設定されます。
