intra-mart Accel Platform Accel Studio テンプレートカタログ 第7版 2024-04-01

intra-mart Accel Platform Accel Studio テンプレートカタログ 第7版 2024-04-01

目次 ≪  5.3. オプションテンプレート 5.3.2. CSVインポート   ≫

5.3.1. ファイルアップロード

このページでは「ファイルアップロード」テンプレートの概要、アプリケーションへの追加方法について解説します。

5.3.1.1. 「ファイルアップロード」テンプレートとは

../../../_images/file_upload_download.png

このテンプレートは、 IM-BloomMakerの「ファイルアップロード」エレメントを利用した「ファイルアップロード」処理を提供します。
このテンプレートでは、IM-BloomMakerの資材は作成されません。
「ファイルアップロード」機能を利用するためには、このテンプレートから作成された処理を、「ファイルアップロード」機能を追加したいIM-BloomMakerのコンテンツから呼び出す必要があります。

コラム

「ファイルアップロード」テンプレートは2022 Winter(Freesia)から利用できます。
「ファイルアップロード」機能を追加した際のイメージは、以下の通りです。
../../../_images/file_upload_option_00.png
追加手順の詳細については、「チュートリアル」で紹介します。

5.3.1.2. チュートリアル

ここでは、「マスタメンテナンス」テンプレートから作成されたアプリケーションへ「ファイルアップロード」機能を追加する手順について紹介します。

コラム

紹介した手順通りではなくとも、「ファイルアップロード」機能を追加することは可能です。

5.3.1.2.1. 「ファイルアップロード」機能の追加手順

  1. 「既存アプリケーションの更新」画面への遷移
    「アプリケーション管理」画面の「テンプレートからリソースを追加する」をクリックします。
    ../../../_images/file_upload_option_01.png

    「業務テンプレート一覧」が表示されるので、「ファイルアップロード」テンプレートを選択します。
    ../../../_images/file_upload_option_02.png

  2. IDの決定に利用する文字列の設定
    「既存アプリケーションの更新」画面が表示されたら、「IDの決定に利用する文字列」を設定します。
    「IDの決定に利用する文字列」は、各処理やIDなどに利用されます。
    ../../../_images/file_upload_option_03.png

    コラム

    「既存アプリケーションの更新」画面では、既存アプリケーションの基本情報が自動入力されます。
    なお、アプリケーションIDとアプリケーション名は変更できません。

  3. 利用するデータベース種別とテーブルの名称の設定
    次に、利用するデータベース種別とテーブルの名称を設定します。
    なお、「ファイルアップロード」テンプレートでは、新規にテーブルを作成する必要があります。
    ../../../_images/file_upload_option_04.png

  4. 既存アプリケーションの更新
    アプリケーションの基本情報とテーブル情報を設定した後、「既存アプリケーションの更新」ボタンをクリックしてください。
    入力項目に不備が無ければ、自動で既存アプリケーションの更新が行われます。
    ../../../_images/file_upload_option_05.png

  5. 既存アプリケーションの更新結果
    アプリケーションの更新が完了すると、ステータスが「COMPLETE」と表示されます。
    ../../../_images/file_upload_option_06.png

5.3.1.2.2. IM-BloomMaker資材の編集（単一ファイルアップロードの場合）

「ファイルアップロード」機能を追加するために、IM-BloomMaker資材の編集を行います。
「アプリケーション管理」画面の「【チュートリアル】ファイルアップロード 登録・編集・参照画面」を選択してください。
../../../_images/file_upload_option_07.png

注意

画像のアプリケーションは、「マスタメンテナンス」テンプレートのアプリケーション名に「【チュートリアル】ファイルアップロード」と入力して作成されたアプリケーションの例です。

「デザイン編集」画面が表示されたら、以下の手順でコンテンツを編集します。

コラム

コンテンツの編集作業中は、編集した内容を保存するために、こまめに「デザイン編集」画面左上の「上書き保存」をクリックすることを推奨します。
  1. 変数の作成
    「変数」タブから「JSON形式で編集」アイコンをクリックして、$variable 配下に以下の変数を追加してください。
    "endPoint": {
  "list": {
    "requestParameter": {
      "limit": 10,
      "offset": 1,
      "businessKey": ""
    },
    "responseData": {
      "records": [
        {
          "fileKey": "",
          "createUserCd": "",
          "createUserName": "",
          "createDate": null,
          "createDateStr": "",
          "recordUserCd": "",
          "recordUserName": "",
          "recordDate": null,
          "recordDateStr": "",
          "note": ""
        }
      ],
      "totalCount": 0
    }
  },
  "deleteAll": {
    "requestParameter": {
      "businessKey": ""
    },
    "responseData": {
      "error": "",
      "errorMessage": ""
    }
  },
  "crud": {
    "requestParameter": {
      "records": [
        {
          "fileKey": "",
          "note": ""
        }
      ],
      "businessKey": ""
    },
    "responseData": {
      "error": "",
      "errorMessage": ""
    }
  }
}
    ../../../_images/file_upload_option_09.png

    注意

    追加した変数 createDate と recordDate については、「値の型」を「マップ」から「日付・時刻」に変更してください。

    次に、もう一度「JSON形式で編集」アイコンをクリックして、$variable.state 配下に以下の変数を追加してください。
    "uploadFileInfoList": [
  {
    "fileKey": "",
    "note": ""
  }
]
    ../../../_images/file_upload_option_10.png

  2. 新規アクションの追加
    1. Save Upload File アクション
      アクション名には「Save Upload File」と入力してください。
      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.endPoint.crud.requestParameter.records  
      変数値2 $variable.state.uploadFileInfoList プルダウンから「変数値」を選択してください。

      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.endPoint.crud.requestParameter.businessKey  
      変数値2 $variable.state.entity.（主キー） プルダウンから「変数値」を選択してください。

      注意

      主キーが複数ある場合は、「変数○に○を代入する」アクションアイテムの代わりに、「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のカスタムスクリプトを入力してください。
      $variable.endPoint.crud.requestParameter.businessKey = $variable.state.entity.（主キー1） + $variable.state.entity.（主キー2）;

      「IM-LogicDesigner」から「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      ルーティング accel-studio-app/{IDの決定に利用する文字列}/upload-files 「ファイル情報登録・更新・削除処理」で検索してください。
      リクエストパラメータ $variable.endPoint.crud.requestParameter  
      セキュアトークンを送信 チェックを入れる  
      ../../../_images/file_upload_option_11.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

    2. Load Upload File Table アクション
      アクション名には「Load Upload File Table」と入力してください。
      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.endPoint.list.requestParameter.businessKey  
      変数値2 $variable.state.entity.（主キー） プルダウンから「変数値」を選択してください。

      注意

      主キーが複数ある場合は、「変数○に○を代入する」アクションアイテムの代わりに、「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のカスタムスクリプトを入力してください。
      $variable.endPoint.list.requestParameter.businessKey = $variable.state.entity.（主キー1） + $variable.state.entity.（主キー2）;

      「IM-LogicDesigner」から「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      ルーティング accel-studio-app/{IDの決定に利用する文字列}/upload-files/list 「ファイル情報一覧取得処理」で検索してください。
      リクエストパラメータ $variable.endPoint.list.requestParameter  
      レスポンスデータ $variable.endPoint.list.responseData  
      セキュアトークンを送信する チェックを入れない  

      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.state.uploadFileInfoList  
      変数値2 $variable.endPoint.list.responseData.records プルダウンから「変数値」を選択してください。
      ../../../_images/file_upload_option_12.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

    3. Delete All Upload File アクション
      アクション名には「Delete All Upload File」と入力してください。
      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.endPoint.deleteAll.requestParameter.businessKey  
      変数値2 $variable.state.entity.（主キー） プルダウンから「変数値」を選択してください。

      注意

      主キーが複数ある場合は、「変数○に○を代入する」アクションアイテムの代わりに、「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のカスタムスクリプトを入力してください。
      $variable.endPoint.deleteAll.requestParameter.businessKey = $variable.state.entity.（主キー1） + $variable.state.entity.（主キー2）;

      「IM-LogicDesigner」から「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。
      項目 指定する値 備考
      ルーティング accel-studio-app/{IDの決定に利用する文字列}/upload-files/all 「ファイル情報一括削除処理」で検索してください。
      リクエストパラメータ $variable.endPoint.deleteAll.requestParameter  
      レスポンスデータ $variable.endPoint.deleteAll.responseData  
      セキュアトークンを送信する チェックを入れる  
      ../../../_images/file_upload_option_13.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

  3. 既存アクションの編集
    1. Initialize アクション
      「標準」から「アクション○を実行する」アクションアイテムを選択し、「ラベル END」のひとつ前に配置します。
      プルダウンから「Load Upload File Table」を選択してください。
      ../../../_images/file_upload_option_14.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

    2. on Clicked Register Button アクション
      「標準」から「アクション○を実行する」アクションアイテムを選択し、「ラベル END」のひとつ前に配置します。
      プルダウンから「Save Upload File」を選択してください。
      ../../../_images/file_upload_option_15.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

    3. on Clicked Update button アクション
      「標準」から「アクション○を実行する」アクションアイテムを選択し、「ラベル END」のひとつ前に配置します。
      プルダウンから「Save Upload File」を選択してください。
      ../../../_images/file_upload_option_16.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

    4. on Clicked Delete Button アクション
      「標準」から「アクション○を実行する」アクションアイテムを選択し、「アクション Transition to List Screen を実行する」のひとつ前に配置します。
      プルダウンから「Delete All Upload File」を選択してください。
      ../../../_images/file_upload_option_17.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

  4. コンテナページの追加
    新規にコンテナページを追加し、「コンテナページ」のエレメント固有の「name」には「File Upload Area」と入力してください。
    ../../../_images/file_upload_option_18.png

  5. テーブルの追加
    コンテナページの作成後、「繰り返し（Bulma）」から「テーブルコンテナ（繰り返し）」エレメントを配置してください。
    「テーブル（繰り返し）」のエレメント固有のプロパティは以下のように設定してください。
    プロパティ 指定する値
    columnCount 2
    list $variable.state.uploadFileInfoList
    ../../../_images/file_upload_option_19.png

    次に、「汎用」から「ラベル」エレメントを選択し、画像のように「テーブルヘッダセル」内に配置してください。
    「ラベル」のエレメント固有の「textContent」には「固定値」でそれぞれ「ファイル名」と「備考」を入力してください。
    ../../../_images/file_upload_option_20.png

    次に、「フォーム部品」から「ファイルアップロード」エレメントを選択し、画像のように「テーブルセル」内に配置してください。
    「ファイルアップロード」のエレメント固有のプロパティは以下のように設定してください。
    プロパティ 指定する値 備考
    value $variable.state.uploadFileInfoList[$index].fileKey  
    readonly = $input.__mode__ == $constant.mode.refer 変数値を選択してください。
    ../../../_images/file_upload_option_21.png

    次に、「フォーム部品（Bulma）」から「フィールド」エレメントを選び、画像のように「テーブルセル」内に配置してください。
    ../../../_images/file_upload_option_22.png

    「フィールド」エレメントを配置した後、「フォーム部品（Bulma）」から「テキスト入力」エレメントを選択し、画像のように「フィールド」内に配置してください。
    「テキスト入力要素」のエレメント固有のプロパティは以下のように設定してください。
    プロパティ 指定する値 備考
    disabled = $variable.state.uploadFileInfoList[$index].fileKey == null 変数値を選択してください。
    readonly = $input.__mode__ == $constant.mode.refer 変数値を選択してください。
    value $variable.state.uploadFileInfoList[$index].note 変数値を選択してください。
    ../../../_images/file_upload_option_23.png

  6. 追加したコンテナページの配置
    「パーツ」から「コンテナページ埋め込み」エレメントをコンテナ「Input Area」に配置してください。
    「コンテナページ埋め込み」エレメントの「page」には、作成した「File Upload Area」を指定してください。
    ../../../_images/file_upload_option_24.png

  7. 編集内容の保存
    最後に編集内容の保存を行います。画面左上の「上書き保存」をクリックしてください。
    ../../../_images/file_upload_option_25.png

5.3.1.2.3. IM-BloomMaker資材の編集（複数ファイルアップロードの場合）

「ファイルアップロード」テンプレートは、複数ファイルアップロードに対応しています。
ファイルごとに備考欄を用意する都合上、「マルチファイルアップロード」エレメントではなく、「ファイルアップロード」エレメントを繰り返し利用することで実装します。

実装例として、「【チュートリアル】ファイルアップロード 登録・編集・参照画面」から、複数ファイルアップロードできるようにする手順を紹介します。
  1. 事前準備
    IM-BloomMaker資材の編集（単一ファイルアップロードの場合）までを完了させてください。

  2. 定数の作成
    「変数」タブからプルダウンで「定数」を選択し、「JSON形式で編集」アイコンから $constant 配下に以下の定数を追加してください。
    "uploadFileInfoList": {
  "fileKey": "",
  "note": ""
}
    ../../../_images/file_upload_option_26.png

  3. 新規アクションの追加
    1. Adjust File Upload Element アクション
      アクション名には「Adjust File Upload Element」と入力してください。
      「標準」から「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のカスタムスクリプトを入力してください。
      const index = $im.resolve('$index');
const length = $variable.state.uploadFileInfoList.length;
if (index === length - 1 ) {
  const uploadFileInfoList = $constant.uploadFileInfoList;
  $variable.state.uploadFileInfoList.push(uploadFileInfoList);
} else if ($variable.state.uploadFileInfoList[index].fileKey === null) {
  $variable.state.uploadFileInfoList.splice(index, 1);
}

      「実行条件」内の「標準」から「変数○が○でないとき」を配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $input.__mode__  
      変数値2 $constant.mode.refer プルダウンから「変数値」を選択してください。
      ../../../_images/file_upload_option_27.png

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。

  4. 既存アクションの編集
    1. Load Upload File Table アクション
      「標準」から「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のカスタムスクリプトを入力してください。
      配置する位置は「Load Upload File Table」アクション内の最後です。
      const uploadFileInfoList = $constant.uploadFileInfoList;
$variable.state.uploadFileInfoList.push(uploadFileInfoList);

      「実行条件」内の「標準」から「変数○が○でないとき」を配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $input.__mode__  
      変数値2 $constant.mode.refer プルダウンから「変数値」を選択してください。

      「実行条件」内の「標準」から「変数○が○でないとき」を配置して、以下のように設定してください。
      項目 指定する値 備考
      変数値1 $variable.endPoint.list.responseData.totalCount  
      変数値2 0 プルダウンから「固定値」を選択してください。
      ../../../_images/file_upload_option_28.png

  5. アクションの紐付け
    「ファイルアップロード」のイベントの「入力値変更時」に、先ほど作成したアクション「Adjust File Upload Element」を設定してください。
    ../../../_images/file_upload_option_29.png

  6. 編集内容の保存
    最後に編集内容の保存を行います。画面左上の「上書き保存」をクリックしてください。
    ../../../_images/file_upload_option_30.png

5.3.1.2.4. 「ファイルアップロード」機能の使用例

チュートリアルで追加した「ファイルアップロード」機能の使用例を紹介します。

コラム

アプリケーションの認可設定については、「 Accel Studioのテンプレート 」を参照してください。

5.3.1.2.4.1. 登録画面


「登録画面」では、ファイルをアップロードし、備考に任意の文字列を入力できます。
「登録」ボタンをクリックすると、ファイルの情報が登録されます。
../../../_images/file_upload_option_31.png

5.3.1.2.4.2. 詳細画面


「詳細画面」では、アップロードされたファイルの情報を確認できます。
アップロードされたファイルをクリックすると、ファイルをダウンロードできます。
../../../_images/file_upload_option_32.png

5.3.1.2.4.3. 編集画面


「編集画面」では、登録されているファイルの情報を編集できます。
「更新」ボタンをクリックすると、編集したファイルの情報で更新されます。
「削除」ボタンをクリックすると、画面に登録されている情報と一緒にアップロードされたファイルの情報も削除されます。
../../../_images/file_upload_option_33.png

5.3.1.3. 「ファイルアップロード」テンプレートから作成される資材

「ファイルアップロード」テンプレートからは、アップロードするファイルに関する処理が作成されます。
処理はIM-LogicDesignerで作成されます。

5.3.1.3.1. ファイル情報登録・更新・削除処理

入力に指定した businessKey に紐付くファイル情報をこの入力値で上書き登録をします。
そのため、businessKey に既にアップロードしたファイルが登録されており、同一の businessKey に対して追加登録（登録済みの情報を維持）したい場合は登録済みの fileKey も入力値に含めてリクエストに送信してください。
逆にファイルを削除したい場合は、削除したいファイルの fileKey を削除した入力値でリクエストを送信してください。

5.3.1.3.1.1. ルーティングURL

accel-studio-app/{IDの決定に利用する文字列}/upload_files

コラム

REST APIとして利用するためのURLについては、「 IM-LogicDesigner仕様書 」 - 「 ルート・HTTPメソッドに一致するフロールーティング情報の取得 」を参照してください。

5.3.1.3.1.2. メソッド

PUT

5.3.1.3.1.3. 入力値

{
  "records": [
    {
      "fileKey": "",
      "note": ""
    }
  ],
  "businessKey": ""
}
変数名 型 説明
records map 登録・更新・削除するファイル情報を格納する配列です。
fileKey string 登録・更新・削除するファイルを一意に特定するキーを指定します。
note string 備考です。
businessKey string 登録・更新・削除するときに利用される値です。添付ファイルを利用する画面毎に一意の値となるように指定することを推奨します。

コラム

fileKey にはIM-BloomMakerの「ファイルアップロード」のエレメント固有の value に指定した値を設定してください。
詳細については、「 IM-BloomMaker for Accel Platform ユーザ操作ガイド 」 - 「 ファイルアップロード 」を参照してください。

5.3.1.3.1.4. 出力値

{
  "error": false,
  "errorMessage": ""
}
変数名 型 説明
error boolean エラーが発生した場合、true が格納されます。
errorMessage string エラーが発生した場合、エラー内容のメッセージが格納されます。

コラム

このロジックフローには出力値は存在しませんが、エラー終了タスクを使用しているため、エラーが発生した場合には、error と errorMessage が返却されます。
エラーハンドリングの詳細については、「 IM-LogicDesigner チュートリアルガイド 」 - 「 処理結果情報の詳細 」を参照してください。

5.3.1.3.2. ファイル情報一括削除処理

指定した businessKey に紐付けられているファイル情報を全て削除します。

5.3.1.3.2.1. ルーティングURL

accel-studio-app/{IDの決定に利用する文字列}/upload_files

コラム

REST APIとして利用するためのURLについては、「 IM-LogicDesigner仕様書 」 - 「 ルート・HTTPメソッドに一致するフロールーティング情報の取得 」を参照してください。

5.3.1.3.2.2. メソッド

DELETE

5.3.1.3.2.3. 入力値

{
  "businessKey": ""
}
変数名 型 説明
businessKey string 一括削除するときに利用される値です。添付ファイルを利用する画面毎に一意の値となるように指定することを推奨します。

5.3.1.3.2.4. 出力値

{
  "error": false,
  "errorMessage": ""
}
変数名 型 説明
error boolean エラーが発生した場合、true が格納されます。
errorMessage string エラーが発生した場合、エラー内容のメッセージが格納されます。

コラム

このロジックフローには出力値は存在しませんが、エラー終了タスクを使用しているため、エラーが発生した場合には、error と errorMessage が返却されます。
エラーハンドリングの詳細については、「 IM-LogicDesigner チュートリアルガイド 」 - 「 処理結果情報の詳細 」を参照してください。

5.3.1.3.3. ファイル情報一覧取得処理

指定した businessKey に紐付けられているファイル情報を取得します。

5.3.1.3.3.1. ルーティングURL

accel-studio-app/{IDの決定に利用する文字列}/upload_files/list

コラム

REST APIとして利用するためのURLについては、「 IM-LogicDesigner仕様書 」 - 「 ルート・HTTPメソッドに一致するフロールーティング情報の取得 」を参照してください。

5.3.1.3.3.2. メソッド

GET

5.3.1.3.3.3. 入力値

{
  "businessKey": "",
  "limit": 0,
  "offset": 1
}
変数名 型 説明
businessKey string 一覧取得するときに利用される値です。添付ファイルを利用する画面毎に一意の値となるように指定することを推奨します。
limit integer 取得するデータの最大件数です。（0以上。0の場合、offset以降の全件）
offset integer 取得するデータの開始位置です。（1以上）

5.3.1.3.3.4. 出力値

{
  "records": [
    {
      "fileKey": "",
      "createUserCd": "",
      "createUserName": "",
      "createDate": null,
      "createDateStr": "",
      "recordUserCd": "",
      "recordUserName": "",
      "recordDate": null,
      "recordDateStr": "",
      "note": ""
    }
  ],
  "totalCount": 0
}
変数名 型 説明
records map 取得したファイル情報を格納する配列です。
fileKey string 登録済みのファイルを一意に特定するキーを指定します。
createUserCd string 作成者ユーザコードです。
createUserName string 作成者ユーザ名です。
createDate date 作成日（日付型）です。
createDateStr string 作成日（文字列型）です。
recordUserCd string 更新者ユーザコードです。
recordUserName string 更新者ユーザ名です。
recordDate date 更新日（日付型）です。
recordDateStr string 更新日（文字列型）です。
note string 備考です。
totalCount integer 総件数です。

目次 ≪  5.3. オプションテンプレート 5.3.2. CSVインポート   ≫

Copyright © 2022 NTT DATA INTRAMART CORPORATION

⇄ Sidebar ↑Top