本シリーズについて：全体構成はこちら
課題
取引先が販売促進費の確認書データを提出する際、実績が多い場合は数十件～のデータの登録が必要なケースがありました。FormBridgeのフォームを利用する上で手入力のみとする事は、データ量が多いほど入力時間が長くなり、入力ミスのリスクもありました。
また、取引先側は既にExcelで実績データを管理していることが多く、「そのままアップロードできれば効率的では？」という課題意識がありましたが、FormBridgeには公式のテーブル一括取込API はなく、JavaScriptカスタマイズで独自実装する必要がありました。
実行内容・取り組んだこと
Excel取込機能の実装概要
確認書フォーム（FormBridge）に「一括取込」というラベルをトリガーとしたExcel一括取込機能を実装しました。
実装した仕組み
1. FormBridge側に機能がないため、独自カスタマイズで実装
FormBridge には、Excel読込機能、テーブル行の追加・削除する機能 は公式には提供されていません。そのため、JavaScript カスタマイズで以下の対応を行いました：
- Excelファイルの読込機能の構築
- テーブル要素の操作を行い必要な行数を確保 → FormBridgeのAPIを利用したデータ反映
2. Excelデータをテーブルに一括読込
ユーザーが選択したExcelファイルから、以下の手順でデータを反映します：
- Excelの指定された列（日付・店舗名・取引先名・金額）を抽出
- FormBridge のテーブル行数が足りない場合は行を追加
- 抽出したデータを確認書テーブルの各行に反映
この仕組みにより、数十件～のデータを数秒で登録できます。
3. 読込前にバリデーション を実施
Excelから読み込まれたデータの反映前チェックとして、以下の3段階のチェックを行っています：
- 形式チェック：日付形式（YYYY/MM/DD または YYYY-MM-DD）が正しいか
- 型チェック：金額・件数が数値であるか
- 空欄検出：4つの必須項目（日付・店舗名・取引先名・金額）に空欄がないか
いずれかの不備が検出された場合は、行番号付きでエラーメッセージを表示 するため、ユーザーはExcelのどの行を修正すべきかが一目瞭然です。修正後に再度一括取込を実行できます。
実施ポイント
① Excel読込機能による業務効率化
Excelファイルを直接読み込むことで、数十件～のデータを数秒で登録でき、取引先担当者の手入力負担を大幅に削減します。既存のExcelで管理されているデータをそのまま活用もできるため、作業フローの変更を最小化しています。
② 多段階バリデーションによるデータ品質確保
「形式」「型」「空欄」の3段階チェックを組み合わせることで、不良データをフォーム送信前に全て検出できます。エラーは行番号付きで通知されるため、修正が必要な箇所を容易に特定でき、修正負担を最小化しています。
③ UI/UXの工夫
管理面として、ラベルをトリガーとすることで、エンドユーザー様でもボタンの文字を編集可能としています。
まとめ・効果
このExcel一括取込機能により、以下の効果を見込んでいます。
- 入力作業時間の大幅削減：数十件～のデータを数秒で反映可能
- 入力ミスの排除：Excelから直接データを読み込むため、手入力エラーが発生しない
- 品質管理の自動化：フォーム送信前にバリデーションが走り、不良データの混入を防止
FormBridgeに機能が無いという課題に対して、JavaScriptカスタマイズにより、Excel取込機能を実現しました。sheetJSやDOM操作といった標準的なWeb技術を活用しており、他のFormBridgeフォームにも同様のパターンで応用が可能です。（※DOM操作は推奨されていません。実装をする場合は実装後の管理などを踏まえてご判断ください。）
← 記事② に戻る
→ 記事④ へ（近日公開予定）
