メインコンテンツまでスキップ

Excelファイルの内容をフォームに取り込む

このページでは、Excelファイルをアップロードし、その内容をフォーム上の項目に取り込む方法を紹介します。フォーマットに沿って作成されたExcelファイルを業務ロジックで解析し、その内容をフォーム上の対応する項目の入力データとして利用できます。

以下の流れで設定を行います。

  1. フォームを作成する
  2. 業務ロジックを作成する
注記

「Accel-Mart Quick アプリケーション管理者」ロールを持つユーザで実施してください。

完成イメージ​

「完成イメージ」

完成サンプル​

以下の完成サンプルをダウンロードしてご活用ください。

  1. メニュー「管理」-「ノーコード開発」- 「Webデータベース一覧」からアプリケーション一覧画面を表示します。
  2. ツールバーの「インポート」をクリックし、Webデータベース インポート画面を表示します。
  3. web_database_export.zipのファイルをダウンロードし、Webデータベース インポート画面からインポートします。
  4. https://お客様環境ホスト名.accel-mart.com/imart/forma/normal/view/regist_application_view/excel_parse_test のURLへアクセスし、アプリ実行画面を表示します。
  5. excel.xlsxのファイルをダウンロードし、ダウンロードしたファイルを「ファイルアップロード」アイテムからアップロードします。「Excel取り込み」ボタンをクリックすることでExcelファイルの内容をフォーム上に取り込むことが可能です。

フォームを作成する​

アクション設定「業務ロジック」を利用して「ボタン(イベント)」のクリックイベントに対してロジックフローを呼び出すフォームを作成します。

  1. 「ファイルアップロード」アイテムと「ボタン(イベント)」アイテムをフォームに配置します。

    「アイテム配置」

  2. 1つのExcelファイルのアップロードを想定するため、「ファイルアップロード」アイテムのプロパティに以下を設定します。

    • 基本設定タブの添付ファイルの個数（最大）: 1

      「基本設定タブの添付ファイルの個数（最大）」

    • 許可する拡張子 : xlsx

      「許可する拡張子」

  3. フォームのツールバーから「アクション設定」をクリックし、イベント設定ダイアログを表示します。

    アクション設定をクリックする画像

  4. 「アイテムイベント」タブから「ボタン(イベント)」のクリックイベントに対する設定を追加します。追加したイベントの「設定」アイコンをクリックし、アクション設定ダイアログを表示します。

    「イベント設定ダイアログ」

  5. アクション「業務ロジック」を追加し、追加したアクションの「設定」アイコンをクリックします。

    「アクション設定ダイアログ」

  6. ロジックフローのひな形が生成され、ロジックフローの編集画面が表示されます。

    「ロジックフロー定義編集画面」

業務ロジックを作成する​

続いて、「ボタン(イベント)」のクリックイベントから呼び出されるロジックフローの処理内容を作成します。ロジックフローの処理内容の大まかな流れは以下のとおりです。

  1. 「ファイルアップロード」アイテムにアップロードされたExcelファイルのデータを取得します。
  2. 取得したExcelファイルのデータをストレージへ書き出します。
  3. ストレージ上のExcelファイルに対してExcel入力定義タスクを実行し、Excelファイルの内容を解析して各セルに入力された値を取得します。
  4. 取得したセルの入力値を返却します。

「ロジックフロー」

図：作成する業務ロジック

以下のタスクを使用します。

以下のユーザ定義タスクを使用します。

アップロードされたExcelファイルのデータ取得​

「ファイルアップロード情報取得」タスクを利用して 「ファイルアップロード」アイテムにアップロードされたExcelファイルのデータを取得する処理を作成します。

少し複雑ですが、2つの「ファイルアップロード情報取得」タスクを呼び出してファイルのデータを取得する必要があります。1つ目の「ファイルアップロード情報取得」タスクでは、対象の「ファイルアップロード」アイテムにアップロードされたファイルのID情報(fileId)を取得します。2つ目の「ファイルアップロード情報取得」タスクでは1つ目のタスクで取得したファイルのID情報(fileId)をもとにファイルのデータを取得します。

  1. 以下のようにタスクを配置します。

    「タスクの配置1」

  2. 1つ目の「ファイルアップロード情報取得」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。表示中のフォームとフォーム上の「ファイルアップロード」アイテムの情報を指定し、「ファイルアップロード」アイテムにアップロードされたファイルのメタデータを取得します。

    始点終点
    入力 - formaParam - imfr_application_id<string>im_bisFileUpload1 - applicationId<string>
    入力 - formaParam - imfr_insert_id<string>im_bisFileUpload1 - insertId<string>
    入力 - formaParam - imfr_process_key<string>im_bisFileUpload1 - processKey<string>
    定数 - upload_item_id<string>im_bisFileUpload1 - upload_item_id<string>

    「ファイルアップロード情報取得タスクのマッピング1」

    入力値 upload_item_id

    「upload_item_id」

  3. 「分岐」タスクをクリックし、タスク固有設定のパネルを表示します。条件式に${sizeOf(im_bisFileUpload1)==1}を設定します。アップロード済みのファイルがあるかどうかをチェックし、ファイルがあれば、後続の処理に遷移させます。ファイルがなければ終了タスクに遷移させます。

    「分岐条件1」

  4. 2つ目の「ファイルアップロード情報取得」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。1つ目のタスクで取得したファイルのメタデータ（fileId)を指定してファイルのデータを取得します。

    始点終点
    入力 - formaParam - imfr_application_id<string>im_bisFileUpload2 - applicationId<string>
    入力 - formaParam - imfr_insert_id<string>im_bisFileUpload2 - insertId<string>
    入力 - formaParam - imfr_process_key<string>im_bisFileUpload2 - processKey<string>
    入力 - formaParam - imfr_process_key<string>im_bisFileUpload2 - processKey<string>
    定数 - upload_item_id<string>im_bisFileUpload2 - upload_item_id<string>
    im_bisFileUpload1 - fileId<string>im_bisFileUpload2 - fileId<string>

    「ファイルアップロード情報取得タスクのマッピング2」

Excelファイルのストレージへの書き出し​

「ファイルアップロード情報取得」タスクを利用して取得したExcelファイルのデータをストレージに書き出す処理を作成します。

「セッションストレージ取得」タスクを利用してファイルを書き出すセッションスコープストレージを取得します。取得したセッションスコープストレージに対して「ストレージ出力（バイナリ）」タスクを利用してExcelファイルのデータを書き出します。

  1. 以下のようにタスクを配置します。

    「タスクの配置2」

  2. 「セッションストレージ取得」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。「identifier」関数を利用して一意なIDを生成し、こちらのIDのパスを指定してセッションスコープストレージを取得します。

    始点終点
    関数 - ID生成 - identifier<string>im_sessionStorage1<string>

    「セッションストレージ取得のマッピング」

  3. 「ストレージ出力（バイナリ）」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。取得したセッションスコープストレージを書き出し先のストレージとして指定します。取得済みのExcelファイルのデータを書き出し対象のバイナリデータとして指定します。

    始点終点
    im_bisFileUpload2 - fileData<binary>im_writeBinaryToStorage1 - binary<binary>
    im_sessionStorage1 - im_sessionStorage1<storage>im_writeBinaryToStorage1 - storage<storage>

    「ストレージ出力（バイナリ）のマッピング2」

ストレージ上のExcelファイルの解析​

ユーザ定義「Excel入力定義」を利用してExcelファイルから指定したセルの入力値を取得する処理を作成します。

  1. パレット「ユーザ定義追加」から「Excel入力定義」を追加し、Excel入力定義編集画面を表示します。

    「ユーザ定義メニュー」

  2. Excel入力定義編集画面にて解析対象のExcelファイルに対して入力値の取得対象のセルの情報を設定し、ユーザ定義を登録します。単項目のセルについては、セル入力定義にて対象のセルの位置を指定します。明細項目のセルについては、範囲指定入力定義にて対象のセルの範囲を指定します。

    「Excel入力定義編集」

  3. 登録したユーザ定義タスクをパレットから配置し、配置されたユーザ定義タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。取得済みのセッションスコープストレージを解析対象のExcelファイルとして指定します。

    「ユーザ定義タスクのマッピング」

取得したセルの入力値の返却​

ユーザ定義「Excel入力定義」を利用して取得した各セルの入力値を出力し、フォームへ返却します。

Excelのセルから取得した入力値が存在するかをチェックし、存在すればフォームへの返却を行う終了タスクに遷移させます。入力値が存在しなければエラーメッセージを返却する終了タスクに遷移させます。

  1. 以下のようにタスクを配置します。

    「タスクの配置3」

  2. 「ファイルおよびディレクトリの削除」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。不要になったセッションスコープストレージ上のファイルを削除します。

    始点終点
    im_sessionStorage1<storage>im_removeStorage1<storage>

    「ファイルおよびディレクトリの移動のマッピング�」

  3. 「分岐」タスクをクリックし、タスク固有設定のパネルを表示します。条件式に${parse_excel_file1.address!=null&&sizeOf(parse_excel_file1.route)!=0}を設定します。Excelのセルから取得した入力値が存在するかをチェックし、存在すればフォームへの返却を行う終了タスクに遷移させます。入力値が存在しなければエラーメッセージを返却する終了タスクに遷移させます。parse_excel_file1はユーザ定義「Excel入力定義」から作成したユーザ定義タスクのIDになります。

  4. 1つ目の「終了」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。Excelのセルから取得した入力値をフォーム上の項目に返却します。また、通知設定に成功メッセージを表示するように設定します。

    始点終点
    定数 - false<string>出力 - notificationProperty - imfrErrorFlag<boolean>
    定数 - successMessage<string>出力 - notificationProperty - imfrMessage<string>
    parse_excel_file1 - address<string>出力 - formData - address<string>
    parse_excel_file1 - route<object[]>出力 - formData - t1<object[]>

    「終了のマッピング」

  5. 2つ目の「終了」タスクをダブルクリックし、マッピング画面を表示します。以下のようにマッピングを行います。通知設定にエラーメッセージを表示するように設定します。

    始点終点
    定数 - true<string>出力 - notificationProperty - imfrErrorFlag<boolean>
    定数 - errorMessage<string>出力 - notificationProperty - imfrMessage<string>

    「終了のマッピング2」

  6. これで作成手順は全て完了です。作成したフォームの操作方法は「完成サンプル」を参照してください。