明細の変更イベントが発生したパーツの値を表示する

明細の変更イベントでは、変更が発生したテーブルのIDと行インデックスを取得する事が出来ます。
ここでは、明細の変更イベント発生時にテーブルIDと行インデックスを利用して入力値を表示するサンプルを紹介します。

サンプルについて

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

利用するイベント

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

サンプルフォーム

パーツID	パーツタイプ	補足
-	テーブルパーツ	行数は任意
fidProductName	テキスト（一行）パーツ	商品名（テーブルの1列目）
fidQuantity	テキスト（一行）パーツ - 数値	数量（テーブルの2列目）
fidUnitPrice	テキスト（一行）パーツ - 金額	単価（テーブルの3列目）
fidPrice	テキスト（一行）パーツ - 金額	金額（テーブルの4列目）

カスタマイズコード

(function () {
  'use strict';

  /**
   * 商品名の変更イベント
   */
  collaboflow.events.on('request.input.fidProductName.change', function (e) {
    if (!'table_id' in e || !'row_index' in e) {
      return;
    }

    // 明細行の情報
    const table_rows = e.parts[e.table_id].value;

    // 発生した行のパーツ情報
    const row_parts = table_rows[e.row_index - 1];

    // 変更した行の商品名
    alert('入力値：' + row_parts[e.parts_id].value);
  });

})();

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
3. サンプルフォームに、先で記載されている必要なパーツを配置します。
4. サンプルフォームを再度表示し、カスタマイズタブを表示します。
5. 保存したファイルをアップロードします。
6. アプリ設定＞経路設定から新規に経路を作成します。
7. 任意に経路アイテムを配置して、経路を作成します。
8. 新規文書から作成した経路名をクリックします。
9. 明細の商品名を任意に入力します。
10. 入力値が表示されます。