5.3.2. CSVインポート ¶

5.3.2.2.1. 「CSVインポート」機能の追加手順¶

1. 「既存アプリケーションの更新」画面への遷移

   「アプリケーション管理」画面の「テンプレートからリソースを追加する」をクリックします。
   
   
   

   「業務テンプレート一覧」が表示されるので、「CSVインポート」テンプレートを選択します。
   
   
   
2. IDの決定に利用する文字列の設定

   「既存アプリケーションの更新」画面が表示されたら、「IDの決定に利用する文字列」を設定します。

   「IDの決定に利用する文字列」は、各処理やIDなどに利用されます。
   

   コラム

   「既存アプリケーションの更新」画面では、既存アプリケーションの基本情報が自動入力されます。

   なお、アプリケーションIDとアプリケーション名は変更できません。
   
   
3. 利用するデータベース種別とテーブルの名称の設定

   次に、利用するデータベース種別とテーブルの名称を設定します。

   なお、「CSVインポート」テンプレートでは、既存のテーブルを利用します。
   
   
   
4. 既存アプリケーションの更新

   アプリケーションの基本情報とテーブル情報を設定した後、「既存アプリケーションの更新」ボタンをクリックしてください。

   入力項目に不備が無ければ、自動で既存アプリケーションの更新が行われます。
   
   
   
5. 既存アプリケーションの更新結果

   アプリケーションの更新が完了すると、ステータスが「COMPLETE」と表示されます。
   

5.3.2.2.2. IM-BloomMaker資材の編集¶

1. 変数・定数の作成

   「変数」タブから「JSON形式で編集」アイコンをクリックして、 $variable 配下に以下の変数を追加してください。

   "endPoint": {
     "importCsv": {
       "requestData": {
         "fileKey": ""
       },
       "responseData": {
         "error": false,
         "errorMessage": ""
       }
     }
   }
   

   

   コラム

   本チュートリアルでは実装の簡易化のために、JSONエディタでの変数の追加方法を紹介しています。

   JSONエディタ上から変数を追加する場合、確認ダイアログが表示され「OK」をクリックすると、テーブルヘッダ用の多言語変数の紐付けが外れます。

   多言語変数の紐付けを維持したい場合は、JSONエディタではなく、変数タブの「新規作成」ボタンから変数を追加してください。

   
   
   

   次に、もう一度「JSON形式で編集」アイコンをクリックして、$variable.state 配下に以下の変数を追加してください。

   "csvImport": {
     "fileKey": "",
     "errorMessage": ""
   }
   

   
   
   

   次に、「変数」タブからプルダウンで「定数」を選択し、「JSON形式で編集」アイコンから $constant 配下に以下の定数を追加してください。

   "msgImportCsvSuccess": "Import CSV successful."
   

   

   コラム

   本チュートリアルでは実装の簡易化のために、定数で用意していますが、作成されたアプリケーションを複数のロケールで利用される場合は、多言語変数を使用してください。
   
   
2. 新規アクションの追加
   1. Import CSV アクション

      アクション名には「Import CSV」と入力してください。

      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。

      項目	指定する値	備考
      変数値1	$variable.endPoint.importCsv.requestData.fileKey
      変数値2	$variable.state.csvImport.fileKey	プルダウンから「変数値」を選択してください。

      
      

      「IM-LogicDesigner」から「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

      項目	指定する値	備考
      ルーティング	accel-studio-app/{IDの決定に利用する文字列}/import-csv	「CSVインポート処理」で検索してください。
      リクエストパラメータ	$variable.endPoint.importCsv.requestData
      レスポンスデータ	$variable.endPoint.importCsv.responseData
      セキュアトークンを送信する	チェックを入れる

      
      

      「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定してください。

      項目	指定する値	備考
      変数値1	$variable.state.csvImport.errorMessage
      変数値2	$variable.endPoint.importCsv.responseData.errorMessage	プルダウンから「変数値」を選択してください。

      
      
      

      「標準」から「メッセージをエラーダイアログで表示する」アクションアイテムを配置して、以下のように設定してください。

      項目	指定する値
      変数値	$variable.state.csvImport.errorMessage

      
      

      「実行条件」内の「標準」から「変数○が○でないとき」を配置して、以下のように設定してください。

      項目	指定する値	備考
      変数値1	$variable.state.csvImport.errorMessage
      変数値2	$env.const.null	プルダウンから「変数値」を選択してください。

      
      

      「標準」から「アクション○を実行する」アクションアイテムを配置して、プルダウンから「Load Table Data」を選択してください。
      
      

      「実行条件」内の「標準」から「変数○が○のとき」を配置して、以下のように設定してください。

      項目	指定する値	備考
      変数値1	$variable.state.csvImport.errorMessage
      変数値2	$env.const.null	プルダウンから「変数値」を選択してください。

      
      

      「Bulma」から「メッセージ○を表示する」アクションアイテムを配置して、以下のように設定してください。

      項目	指定する値
      変数値	$constant.msgImportCsvSuccess
      メッセージのタイプ	success

      
      

      「実行条件」内の「標準」から「変数○が○のとき」を配置して、以下のように設定してください。

      項目	指定する値	備考
      変数値1	$variable.state.csvImport.errorMessage
      変数値2	$env.const.null	プルダウンから「変数値」を選択してください。

      
      
      

      アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。
   
   
3. コンテナページの追加

   新規にコンテナページを追加し、「コンテナページ」のエレメント固有の「name」には「Input Area」と入力してください。
   
   
   
4. 既存エレメントのコピー

   コンテナ「Table Operation」の「フレックスコンテナ」を選択した状態で、「コピー」をクリックしてください。
   
   
   

   その後、先ほど作成したコンテナ「Input Area」に、コピーしたエレメントを貼り付けてください。
   
   
   
5. コピーしたエレメントの編集

   左の「フレックスアイテム」に、「フォーム部品」から「ファイルアップロード」エレメントを配置してください。

   「ファイルアップロード」のエレメント固有には以下を設定してください。

   プロパティ	指定する値
   value	$variable.state.csvImport.fileKey
   accept	.csv

   
   
   

   右の「フレックスアイテム」内の「ボタン要素」のエレメント固有には以下を設定してください。

   プロパティ	指定する値	備考
   textContent	Import CSV	固定値を選択してください。
   disabled	= !$variable.state.csvImport.fileKey	変数値を選択してください。
   leftIconClass	空欄	元々設定されていた「fas fa-plus」を削除してください。

   
   
   

   「ボタン要素」のイベントの「クリック時」には先ほど作成したアクション「Import CSV」を設定してください。
   
   
   

   「ボタン」のイベントの「クリック時」に設定されている「Transition to Register Screen」アクションを「なし」に変更してください。
   
   
   
6. 追加したコンテナページの配置

   「パーツ」から「コンテナページ埋め込み」エレメントをコンテナ「Overall」に配置してください。

   「コンテナページ埋め込み」エレメントの「page」には、作成した「Input Area」を指定してください。
   
   
   
7. 編集内容の保存

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

5.3.2.2.3. 「CSVインポート」機能の使用例¶

5.3.2.2.3.1. 一覧画面¶

「一覧画面」では、CSVファイルをインポートできます。

「ファイルアップロード」エレメントをクリックし、CSVファイルを選択した後、「Import CSV」ボタンをクリックするとインポートが実行されます。

5.3.2.3.1. CSVインポート処理¶

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

POST

{
  "fileKey": ""
}

{
  "error": false,
  "errorMessage": ""
}

5.3.2.3.2. 「CSVインポート」テンプレートから作成される処理について¶