SAP/ABAPセミナー
SAP/ABAP研修

Fioriプロジェクト作成

12.2 Fioriプロジェクト作成

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

Visual Studio Code

先述の通り、Fioriアプリは、SAPが提供する最新のWebアプリ開発フレームワーク「SAPUI5」を使って作られます。
開発には「VS Code（Visual Studio Code）」という無料の開発ツールを利用します。

■開発の流れ（イメージ）

当研修における、開発の流れは下記となります。

1. VS CodeでFioriプロジェクトを作成

SAP Fiori Tools拡張機能を使って、テンプレートから簡単に作成できます。

2. 画面（View）と処理（Controller）を開発

XMLビューやJavaScriptで、画面デザインと動きを実装します。

3. ODataサービスと接続

バックエンド（ABAPのODataサービス。CDSビューに基づく場合もあります）からデータを取得します。

4. アプリをプレビュー・テスト

ブラウザ上で動作を確認できます。


※本研修ではデプロイは行わずローカルで動作確認します。
※今回は、ソースコードの細部まで理解するというより、全体の処理の流れをイメージすることを目標としてください。

プロジェクト登録

① VS Codeをダブルクリックして起動します。

②Template Selectionが表示されていない場合、Ctrl + Shift + P ボタンを押下し、
Fiori: Open Application Generator を選択します。

③Basic を選択します。

④Nextボタンを押下します。

⑤Connect to an OData Service を選択します。

⑥以下内容を入力します。

  • OData service URL：ZODATA_YYMMnnn_SRVのURL
  • Service username：ユーザ
  • Service password：パスワード ※ログイン情報はSAPと同様

⑦Loginボタンを押下します。

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

プロジェクト登録手順の補足

ZODATA_YYMMnnn_SRVのURL

トランザクションコード：「/N/IWFND/MAINT_SERVICE」による、テスト実行時のURLを入力します。

⑧Nextボタンを押下します。※警告が表示されていてもOK

⑨Nextボタンを押下します。※デフォルトのままでOK

⑩以下内容を入力します。

  • Module name：zfiori_yymmnnn_samp1
  • Application title：yymmnnn Title1
    ※そのほかの項目はデフォルトのままでOK

⑪Finishボタンを押下します。

⑫ポップアップが表示された場合、Yesボタンを押下します。

※プロジェクト作成中は、画面右下にInstalling dependencies…と表示されるので
プロジェクト作成完了まで待機

処理結果メッセージを表示する

処理結果（取得件数）を表示するプログラムを作成します。

①zfiori_yymmnnn_samp1＞
　webapp＞
　view＞
　View1.view.xml
　を押下します。

②赤枠を以下内容に修正します。

<content>
  <Button id="btn" text="実行" press="onExecutePress" />
</content>

③Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

④zfiori_yymmnnn_samp1＞
　webapp＞
　controller＞
　View1. controller.js
　を押下します。

⑤赤枠の通りに次頁の内容を追記します。
※最初の「,（カンマ）」を忘れない 

,
//メッセージを出力する
onExecutePress: function () {
  //ODataモデル
  var oModel = this.getView().getModel();
  var that = this;
  //CUSTOSetメソッドを実行
  oModel.read("/CUSTOSet", {
    //結果を使ってメッセージ表示
    success: function (oData) {
      sap.m.MessageToast.show("取得件数: " + oData.results.length); //成功メッセージ
    },
    error: function (oError) {
      sap.m.MessageToast.show("OData呼び出し失敗"); //エラーメッセージ
    }
  });
}

⑥Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

⑦zfiori_yymmnnn_samp1を右クリックし、Preview Applicationを押下します。

⑧start fiori run を押下します。
※押下後にTERMINALが起動するので、ブラウザが立ち上がるまで待機

⑨ユーザー名、パスワードを入力します。※ログイン情報はSAPと同様

⑩ログインボタンを押下します。

⑪実行ボタンを押下します。

⑫取得件数が表示されれば、処理成功です。

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

処理結果メッセージを表示するプログラムの補足

Viewについて

先述の通り、画面を作成しています。

<Page>では、画面に表示されるタイトルやコンテンツを設定しています。
<Button>では、実行ボタンを作成しています。
ボタン押下時にはcontrollerの「onExecutePress」メソッドを呼び出しています。

Controllerについて

先述の通り、処理（操作）を実装しています。
「onExecutePress」メソッドは、以下流れで処理しています。

①画面（View）のODataモデルを取得し、SAPのデータ読み書きを可能にする。

②ODataサービスの「CUSTOSet」というエンティティを呼び出して、データを読み込む。

③取得結果のメッセージを出力する。

Fiori実行時のデバッグ

Fiori実行でも、OData同様にデバッグが可能です。

①対象のメソッドを表示し、行をクリック（選択）します。※変更モードでもOK

②外部ブレークポイントの設定/削除ボタンを押下します。

③外部ブレークポイントが設定されたことを確認します。

④Fioriを実行します。※実行方法はP34～P37参照

⑤デバッガ画面が立ち上がるので、シングルステップなどを用いてデバッグします。

一覧画面に遷移する

一覧（処理結果）画面に遷移するプログラムを作成します

①zfiori_yymmnnn_samp1＞
　webapp＞
　view＞
　View1.view.xml
　を押下します

②赤枠を「onPressButton」に修正します。

③Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

④zfiori_yymmnnn_samp1＞
　webapp＞
　controller＞
　View1. controller.js
　を押下します。

⑤赤枠の通りに以下内容を追記します。※最初の「,（カンマ）」を忘れない

onPressButton: function(oEvent){
  this.onExecutePress(); //メッセージ出力
  this.onPressGoSecond(); //一覧画面へ遷移
}

⑥赤枠の通りに以下内容を追記します。※最初の「,（カンマ）」を忘れない

},
//画面遷移する
onPressGoSecond: function() {
  //"View2"へ遷移
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.navTo("RouteView2");
}

⑦Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

⑧zfiori_yymmnnn_samp1＞
　webapp＞
　manifest.json
　を押下します。

⑨赤枠の通りに次頁の内容を追記します。※最初の「,（カンマ）」を忘れない

,
"secondService": {
  "uri": "/sap/opu/odata/sap/ZODATA_YYMMnnn_SRV/",
  "type": "OData",
  "settings": {
    "annotations": [],
    "localUri": "localService/mainService/metadata.xml",
    "odataVersion": "2.0"
  }
}

⑩赤枠の通りに以下内容を追記します。※最初の「,（カンマ）」を忘れない

,
"second": {
  "dataSource": "secondService",
  "preload": true,
  "settings": {}
}

⑪赤枠の通りに以下内容を削除、追記します

削除：“config”の”viewPath”※最初の「,（カンマ）」を忘れない

,
{
  "name": "RouteView2",
  "pattern": "second",
  "target": [
    "TargetView2“
  ]
}

⑫赤枠の通りに以下内容を追記します。※TargetView1のviewNameも修正

  "viewName": "zfioriyymmnnnsamp1.view.View1"
},
"TargetView2": {
  "viewType": "XML",
  "transition": "slide",
  "clearControlAggregation": false,
  "viewId": "View2",
  "viewName": "zfioriyymmnnnsamp1.view.View2"
}

⑬Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

⑭zfiori_yymmnnn_samp1＞
　webapp＞
　viewを右クリックし、
　New File…を押下します。

⑮「View2.view.xml」と入力し、エンターを押下します。

⑯赤枠の通りに次頁の内容を追記します。※P56～P58参照

<mvc:View controllerName="zfioriyymmnnnsamp1.controller.View2" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
  xmlns="sap.m">
  <Page id="page2" title="{i18n>title}">
    <content>
      <Table id="resultTable" items="{/CUSTOSet}">
        <headerToolbar>
          <Toolbar id="bar">
            <Title id="list" text="得意先一覧" />
          </Toolbar>
        </headerToolbar>
        <columns>
          <Column id="c1">
            <Text id="t1" text="得意先コード" />
          </Column>
          <Column id="c2">
            <Text id="t2" text="国/地域" />
          </Column>
          <Column id="c3">
            <Text id="t3" text="名称" />
          </Column>
        </columns>
        <items>
          <ColumnListItem id="cli">
            <cells>
              <Text id="f1" text="{Kunnr}" />
              <Text id="f2" text="{Land1}" />
              <Text id="f3" text="{Name1}" />
            </cells>
          </ColumnListItem>
        </items>
      </Table>
      <Button id="btn2" text="戻る" press="onPressGoFirst" />
    </content>
  </Page>
</mvc:View>

⑰Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

⑱zfiori_yymmnnn_samp1＞
　webapp＞
　controllerを右クリックし、
　New File…を押下します。

⑲「View2.controller.js」と入力し、エンターを押下します。

⑳赤枠の通りに次頁の内容を追記します。

sap.ui.define([
  "sap/ui/core/mvc/Controller"
],
function (Controller) {
  "use strict";
  return Controller.extend("zfioriyymmnnnsamp1.controller.View2", {
    onInit: function () {
    },
    //画面遷移する
    onPressGoFirst: function () {
      //"View1"へ遷移
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      oRouter.navTo("RouteView1");
    }
  });
});

㉑Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

㉒zfiori_yymmnnn_samp1を右クリックし、Preview Applicationを押下します。

㉓start fiori run を押下します。※押下後にTERMINALが起動するので、ブラウザが立ち上がるまで待機

㉔ユーザー名、パスワードを入力します。※ログイン情報はSAPと同様

㉕ログインボタンを押下します。

㉖実行ボタンを押下します。

㉗一覧画面に遷移して取得件数が表示されれば、処理成功です。

※戻るボタンを押下すると第一画面へ遷移する

一覧画面に遷移するプログラムの補足

View1について

ボタン押下時にはcontrollerの「onPressButton」メソッドを呼び出しています。

View1.controllerについて

「onPressBuntton」メソッドは、
「onExecutePress」メソッドと「onPressGoSecond」メソッドを呼び出しています。

「onPressGoSecond」メソッドは、
「RouteView2」というナビゲーションを利用して、View2へ画面遷移します。

※「onExecutePress」メソッドは修正していないので割愛（P39参照）

manifestについて

簡単に説明すると、アプリの構成・動作・接続先などを定義する設定ファイルです。
アプリが「何とつながり」「どんな構成で」「どう動くか」 を設定します。

①基本情報
アプリ名、バージョン、IDなどの基本情報は
“id”、“title”に定義されます。

③UI設定
画面表示の設定（UI設定）は” sap.ui”、“sap.ui5”に定義されます。

④モデル定義
ODataモデルなど、モデル（データ）の紐付けは“models”に定義されます。

⑤ルーティング
画面遷移（第一画面 → 第二画面など）の設定は“routing”に定義されます。

コントローラーで”name”を指定すると“target”に設定している画面へ遷移することができます。

View2について

一覧（処理結果）画面を作成しています。

<Table>では、テーブルを作成しています。
ODataサービスの「CUSTOSet」で
取得したデータを利用します。

<headerToolbar>では、
テーブルのタイトルを設定します。
<columns>では、テーブルの項目名を設定します。
<items>では、出力する項目を設定します。

テーブルの下にボタンを作成しています。

ボタン押下時には
controllerの「onPressGoFirst」メソッドを
呼び出しています。

View2.controllerについて

「onPressGoSecond」メソッドは、
「RouteView1」というナビゲーションを利用して、View1へ画面遷移します。

一括登録する

ファイルをアップロードして、一括登録するプログラムを作成します。
まずはODataを作成して、サービス登録します。

①トランザクションコード：「SEGW」でSAP Gateway Service Builderを実行し、プロジェクトを登録します。

②登録ボタンを押下します。

③以下内容を入力します。

  • プロジェクト ：ZODATA_YYMMnnn_UPLOAD（nnnは受講生番号）
  • Beschreibung ：FILE DATA
  • パッケージ ：$TMP
    ※そのほかの項目はデフォルトのままでOK

④続行ボタンを押下します。（EnterでもOK）

OData登録

当手順では、構造を一から定義して登録します。

①データモデルを選択した状態で、右クリックします。
登録＞エンティティタイプを押下します。

②以下内容を入力します。
・ Name Entitätstyp：FILE
※そのほかの項目はデフォルトのままでOK

③続行ボタンを押下します。（EnterでもOK）

④FILE＞プロパティをダブルクリックします。

⑤行追加ボタンを2回押下します。（2行追加）

⑥以下内容を入力します。

⑦保存ボタンを押下します。

OData登録手順の補足

Filenameについて

主キー(Is Key)として扱います。ファイルを一意に識別するためです。
Null許可(Nullw.mögl)は「オフ」に設定します。必ず値が必要です。

Filenameについて

実際のファイル内容（データ本体）を保持するフィールドです。
Null許可(Nullw.mögl)は「オン」（チェックあり）に設定します。空でもエラーにはなりません。
また、作成可能(Anlegbar)は「オン」（チェックあり）に設定します。データを登録することができます。

⑧Entity Setsを選択した状態で、右クリックします。
登録を押下します。

⑨以下内容を入力します。

  • Name EntMenge ：FILESet
  • Name Entitätstyp：FILE

⑩続行ボタンを押下します。（EnterでもOK）

⑪プロジェクトを選択して、実行時オブジェクト作成ボタンを押下します。

⑫続行ボタンを押下します。（EnterでもOK）
※全項目デフォルトのままでOK

⑬ローカルオブジェクトボタンを押下します。

⑭オブジェクトが生成できたことを確認します。
（画面下部に以下のようなオブジェクト生成メッセージが表示できればOK）

⑮エンティティが登録できたら、メソッドを実装します。
対象のプロジェクト直下にある、Runtime Artifactsをダブルクリックします。

⑯ZCL_ZODATA_YYMMnnn_UPL_DPC_EXTをダブルクリックします。

⑰メソッド＞継承メソッドを押下します。
FILESET_CREATE_ENTITYを右クリックし、再定義をクリックします。

⑱デフォルトのコードを削除します。

⑲次頁の内容を追記します。
※P93～P96参照

ファイルアップロード用の構造（ODataで受け取る型）

DATA:
  WK_XSTRING TYPE XSTRING, "Base64デコード用
  WK_STRING TYPE STRING, "文字列変換用（UTF-8）
  ST_UPLOAD TYPE ZCL_ZODATA_YYMMnnn_UPL_MPC=>TS_FILE, "受信データ（OData）
  IT_TABLE TYPE STANDARD TABLE OF ZTYYMMnnn11, "一括登録用内部テーブル
  CL_CONV TYPE REF TO CL_ABAP_CONV_IN_CE. "文字コード変換用クラス


*ODataサービスのデータプロバイダからファイルデータを受信
IO_DATA_PROVIDER->READ_ENTRY_DATA( IMPORTING ES_DATA = ST_UPLOAD ).

*Base64 → XSTRING（デコード）
CALL FUNCTION 'SCMS_BASE64_DECODE_STR‘
  EXPORTING
    INPUT = ST_UPLOAD-FILEDATA
    UNESCAPE = 'X‘
  IMPORTING
    OUTPUT = WK_XSTRING.

*XSTRING → UTF-8（文字列変換）
TRY.
  CL_CONV = CL_ABAP_CONV_IN_CE=>CREATE( INPUT = WK_XSTRING ENCODING = 'UTF-8' ).
  CL_CONV->READ( IMPORTING DATA = WK_STRING ).
  CATCH CX_ROOT INTO DATA(E).
    WRITE: / 'Conversion failed:', E->GET_TEXT( ).
ENDTRY.

*ファイル内容を改行で分割
SPLIT WK_STRING AT CL_ABAP_CHAR_UTILITIES=>NEWLINE INTO TABLE DATA(IT_LINES).

*ファイル内容を内部テーブルに格納
LOOP AT IT_LINES INTO DATA(ST_LINE).

*カンマ区切りで分割
SPLIT ST_LINE AT ',' INTO TABLE DATA(IT_FIELDS).

*内部テーブルに格納
APPEND VALUE #( ZNUM = IT_FIELDS[ 1 ]
                PLADAT = IT_FIELDS[ 2 ]
                DELIVERY_STATUS = IT_FIELDS[ 3 ]
                ZCARRIER = IT_FIELDS[ 4 ]
                TRKNR = IT_FIELDS[ 5 ]
                ZISDT = IT_FIELDS[ 6 ] ) TO IT_TABLE.
ENDLOOP.

*一括登録
INSERT ZTYYMMnnn11 FROM TABLE IT_TABLE.

*コミット
COMMIT WORK.

FILESET_CREATE_ENTITYのコード補足

記述したコードは以下の通りです

*ODataサービスのデータプロバイダからファイルデータを受信

IO_DATA_PROVIDER->READ_ENTRY_DATA( IMPORTING ES_DATA = ST_UPLOAD ).

*Base64 → XSTRING（デコード）

CALL FUNCTION 'SCMS_BASE64_DECODE_STR‘
  EXPORTING
    INPUT = ST_UPLOAD-FILEDATA
    UNESCAPE = 'X‘
  IMPORTING
    OUTPUT = WK_XSTRING.

画面からファイルデータを受信します。
受信したBase64のデータをXSTRINGに変換（デコード）します。 

*XSTRING → UTF-8（文字列変換）

TRY.
  CL_CONV = CL_ABAP_CONV_IN_CE=>CREATE( INPUT = WK_XSTRING ENCODING = 'UTF-8' ).
  CL_CONV->READ( IMPORTING DATA = WK_STRING ).
  CATCH CX_ROOT INTO DATA(E).
    WRITE: / 'Conversion failed:', E->GET_TEXT( ).
ENDTRY.
	
*ファイル内容を改行で分割

SPLIT WK_STRING AT CL_ABAP_CHAR_UTILITIES=>NEWLINE INTO TABLE DATA(IT_LINES).

XSTRINGからUTF-8に変換します。
変換した文字列を改行で分割し、内部テーブル：IT_LINESに格納します。 

*ファイル内容を内部テーブルに格納
LOOP AT IT_LINES INTO DATA(ST_LINE).
  *カンマ区切りで分割
  SPLIT ST_LINE AT ',' INTO TABLE DATA(IT_FIELDS).
    *内部テーブルに格納
    APPEND VALUE #(
      ZNUM            = IT_FIELDS[ 1 ]
      PLADAT          = IT_FIELDS[ 2 ]
      DELIVERY_STATUS = IT_FIELDS[ 3 ]
      ZCARRIER        = IT_FIELDS[ 4 ]
      TRKNR           = IT_FIELDS[ 5 ]
      ZISDT           = IT_FIELDS[ 6 ]
      ) TO IT_TABLE.
ENDLOOP.

IT_LINESを一行ずつ、ST_LINESに格納します（LOOP）。
ST_LINESをカンマ区切りに分割し、IT_FIELDSに格納します。
IT_FIELDSの値を各項目に代入し、IT_TABLEに格納します。 

*一括登録
INSERT ZTYYMMnnn11 FROM TABLE IT_TABLE.
*コミット
COMMIT WORK.

内部テーブル：IT_TABLEをDBテーブル：に一括登録します。
最後にコミットし、処理終了です。

今回のコードではエラー処理は未実装です。
実務では、エラー処理を実装しますが、当手順では割愛します。
確実に動作するファイルを用意し、実行しましょう。
※CSVファイルの作成方法はP101～P102参照

CSVファイル

①サクラエディタをダブルクリックして起動します。

②画像の通りに登録データを入力します。

③任意の保存場所を選択し、ファイル名（.csv）を設定します。※ファイルの種類、文字コードは画像の通りに設定

④保存ボタンを押下すると、CSVファイルの作成完了です。

⑳有効化ボタンをクリックします。

㉑続行ボタンを押下します。（EnterでもOK）※全項目デフォルトのままでOK

㉒トランザクションコード：「/N/IWFND/MAINT_SERVICE」でサービスの有効化および更新を実行し
作成したプロジェクトをサービスカタログに追加します。

㉓サービス追加ボタンを押下します。

㉔以下内容を入力します。

  • システムエイリアス：LOCAL
  • 技術サービス名：ZODATA_YYMMnnn_UPLOAD_SRV

㉕入力ボタンを押下します。（EnterでもOK）

㉖対象のサービスが表示されるので、選択します。

㉗選択済サービスの追加ボタンを押下します。

㉘Local Objectボタンを押下します。
（パッケージ割当に「$TMP」を入力してもOK）

㉙続行ボタンを押下します。（EnterでもOK）
※そのほかの項目はデフォルトのままでOK

㉚ポップアップ画面が表示されるので続行ボタンを押下します。

ODataが有効化できたら、
VS Code でFioriアプリケーションを開発します。

Fiori開発

① VS Codeをダブルクリックして起動します。

②Template Selectionが表示されていない場合、Ctrl + Shift + P ボタンを押下し、
Fiori: Open Application Generator を選択します。

③Basic を選択します。

④Nextボタンを押下します。

⑤Connect to an OData Service を選択します。

⑥以下内容を入力します。

  • OData service URL：ZODATA_YYMMnnn_UPLOAD_SRVのURL
  • Service username：ユーザ
  • Service password：パスワード
    ※ログイン情報はSAPと同様

⑦Loginボタンを押下します。

プロジェクト登録手順の補足

ZODATA_YYMMnnn_UPLOAD_SRVのURL

トランザクションコード：「/N/IWFND/MAINT_SERVICE」による、テスト実行時のURLを入力します。

⑧Nextボタンを押下します。※警告が表示されていてもOK

⑨Nextボタンを押下します。※デフォルトのままでOK

⑩以下内容を入力します。

  • Module name：zfiori_yymmnnn_samp2
  • Application title：yymmnnn Title2
    ※そのほかの項目はデフォルトのままでOK

⑪Browse for folderボタンを押下します。

⑫以下を選択します。

  • フォルダー：projects※1つ上の階層

⑬Finishボタンを押下します。

⑭ポップアップが表示された場合、Add Project to Workspaceボタンを押下します。

⑮ポップアップが表示された場合、Yesボタンを押下します。
※プロジェクト作成中は、画面右下にInstalling dependencies…と表示されるのでプロジェクト作成完了まで待機

⑯zfiori_yymmnnn_samp2＞
　webapp＞
　view＞
　View1.view.xml
　を押下します。

⑰赤枠の通りに次頁の内容に修正します。※P122～P123参照

<mvc:View controllerName="zfioriyymmnnnsamp2.controller.View1"
  xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  xmlns:layout="sap.ui.layout"
  xmlns:unified="sap.ui.unified">
  <content>
    <Text id="text" text="CSVファイルを選択してアップロードしてください" />
    <unified:FileUploader id="fileUploader" name="uploadFile" change="onFileChange" placeholder="ファイルを選択" fileType="csv"
      width="80%" />
    <Button id="btn" text=" アップロード" press="onUploadPress" />
  </content>

⑱Ctrl + S を押下します。※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

⑲zfiori_yymmnnn_samp1＞
　webapp＞
　controller＞
　View1. controller.js
　を押下します。

⑳赤枠の通りに次頁の内容を追記します。※P126～P129参照

//初期処理
onInit: function () {
  this._file = null;
},
//ファイル選択時：FileUploaderのchangeイベント
onFileChange: function (oEvent) {
  //ファイルオブジェクト取得
  const oFileUploader = oEvent.getSource();
  const oFile = oFileUploader.getFocusDomRef().files[0];
  //ファイル選択失敗
  if (!oFile) {
    sap.m.MessageToast.show("ファイルが選択されていません");
    return;
  }
  //ファイル選択成功
  this._file = oFile;
  sap.m.MessageToast.show("ファイルを選択しました: " + oFile.name);
},
// アップロードボタン押下時
onUploadPress: function () {
  //ファイルが選択されていない場合、エラーメッセージを出力
  if (!this._file) {
    sap.m.MessageToast.show("先にファイルを選択してください");
    return;
  }
  //ファイル読み込み準備
  const oReader = new FileReader();
  const that = this;
  // ファイル読み込み処理
  oReader.onload = function (e) {
    //OData作成準備
    const base64String = e.target.result.split(",")[1];
    const oModel = that.getView().getModel();
    const sEntitySet = "/FILESet";
    //OData作成（エンティティをセット）
    const payload = {
      Filename: that._file.name,
      Filedata: base64String
    };
    //ファイルアップロード処理
    oModel.create(sEntitySet, payload, {
      success: function () {
        sap.m.MessageToast.show("アップロード成功！");
        that._file = null;
      },
      error: function (oError) {
        sap.m.MessageToast.show("アップロード失敗...");
        console.error(oError);
      }
    });
  };
  //ファイルをBase64に変換
  oReader.readAsDataURL(this._file);
}

㉑Ctrl + S を押下します。
※保存（ Ctrl + S ）するとファイル名右横の「〇」が消える

㉒zfiori_yymmnnn_samp1を右クリックし、
Preview Applicationを押下します。

㉓start fiori run を押下します。
※押下後にTERMINALが起動するので、ブラウザが立ち上がるまで待機

㉔ユーザー名、パスワードを入力します。
※ログイン情報はSAPと同様

㉕ログインボタンを押下します。

㉖Browse…ボタンを押下します。

㉗CSVファイルを選択します。（ファイル選択成功メッセージが表示）

㉘アップロードボタンを押下します。

㉙アップロード成功メッセージが表示されれば、処理成功です。

一括登録するプログラムの補足

Viewについて

ファイルアップロード画面を作成しています。

<xmlns>では、ファイルアップロードなどの拡張機能が使えるように設定しています。

<Text>では、画面に表示する文字を設定しています。
<unified>では、ファイルアップロード画面を作成しています。
また、ファイルアップロード時にはcontrollerの「onFileChange」メソッドを呼び出しています。
さらに、アップロードボタン押下時にはcontrollerの「onUploadPress」メソッドを呼び出しています。

Controllerについて

「onFileChange」メソッドは、以下流れで処理しています。

①画面（View）のファイルオブジェクトを取得する。

②ファイル取得（選択）結果によってメッセージを出力する。

「onUploadPress」メソッドは、以下流れで処理しています。

①ファイル取得（選択）失敗の場合、メッセージを出力する。

②ファイル読み込みができるようオブジェクトを取得する。

③ODataサービスの「FILESet」
　というエンティティを呼び出して、
　データを作成する。

④作成したODataをアップロードし、
　アップロード結果によってメッセージを出力する。

⑤作成したODataをBase64に変換し、
　サーバ（SAP）に送信する。

登録データについて

一括登録実行後のデータを確認します。

①トランザクションコード：「SE16」で、テーブル名（ZTYYMMnnn11）を入力し、テーブル内容ボタンを押下します。

②実行ボタンを押下します。

③一括登録データを確認します。
※CSVファイルの内容が登録されていることを確認


NEXT>> 12.3 CDSビューを利用したFioriアプリケーション開発

研修の詳細はこちら