フォームブリッジ新イベント完全活用ガイド

ステップ・サブテーブル・フィールド変更を制覇！

フォームブリッジは最近、新しいフォーム対応により イベントがどんどん増え、より細かいタイミングで処理を挟めるようになりました。今回はその便利なイベントを使った「小技集」を紹介します。

1. ステップフォーム移動を検知して処理を分岐

ステップフォームでは、ユーザーがどのステップにいるかを把握することが重要です。
form.step.moving イベントを使うと、ステップ移動のたびに処理が実行できます。

formBridge.events.on(form.step.moving, function(context) {
  console.log('現在のステップ:', context.currentStep);

  if(context.currentStep === 2) {
    alert('ステップ2に到達しました！次の作業を確認してください。');
  }
});

2. サブテーブル行追加・削除でリアルタイム処理

サブテーブル操作も新イベントで柔軟に対応可能です。

行追加時に自動初期値をセット

formBridge.events.on(form.subtable.addRow.myTable, function(context) {
  const rowIndex = context.rowIndex; // 追加された行のインデックス
  const newValue = '未処理';
  setSubtableFieldValue('myTable', 'ステータス', rowIndex, newValue);
});

行削除時に合計を再計算

formBridge.events.on(form.subtable.removeRow.myTable, function(context){
  const record = formBridge.fn.getRecord();
  const table = record['作業一覧']; // サブテーブルフィールドコード
  let total = 0;

  table.forEach(row => {
    total += Number(row['金額']) || 0;
  });

  setFieldValue('合計金額', total);
});

3. フィールド変更をトリガーにした自動補正

form.field.change イベントを使うと、特定フィールドの変更時に他のフィールドを動的に更新できます。

formBridge.events.on(form.field.change.種別, function(context) {
  const value = context.value; // 変更後の値

  if(value === 'PC等設置・回収') {
    setFieldValue('備考', '必須入力です');
  } else {
    setFieldValue('備考', '');
  }
});

ポイントまとめ

• form.step.moving：ステップフォームの移動を検知して処理分岐
• form.subtable.addRow / form.subtable.removeRow：サブテーブルの行操作をリアルタイム補正
• form.field.change：フィールド変更をトリガーに自動補正や必須条件設定

フォームブリッジの新しいイベントを活用すると、今まで難しかった「ステップフォーム＋サブテーブル＋条件付き入力」の組み合わせも実現できます。