Fiori(SAP UI5)でSalesOrderListを作ってみよう！

# 1:概要
この記事は [SAP Advent Calendar 2020](https://adventar.org/calendars/5047) の12/9分の記事として執筆しています。
SAP社の次世代のUI/UXであるSAP Fioriがリリースされて歳月が経ちましたが、未だに多くの導入現場では従来型のSAP GUIの中でのABAPによるアドオン開発が行われています。
しかし今後は、SAP Fioriによるアドオン開発が主流となってくるとみています。
なぜなら、FioriではSAP GUIでは実現できない以下のメリットがあるためです。

* 様々なSaaSやWebアプリケーションをAPI経由で連結し、統合されたデータソースにアクセス可能
* アクセスするデバイスを問わない。ブラウザ経由であれば、タブレットやスマホからでもアクセス可能

この記事では、SalesOrderList(受注レポート)を、Fioriで開発する方法について解説します。

# 2:前提
SAP Cloud Platformのアカウントが必要です。
開発環境はローカルでも良いが本記事では、SAP Business Application Studioを使います。

# 3:完成したプログラム
https://github.com/Auggie9010/fiori_salesorder_list.git

![ezgif-7-1ac8bb6b9a3e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/12368dde-be2e-cbf0-b052-7b3639f5db81.gif)


# 3:詳細手順
## 3-1:SAP Cloud PlatformのFree Trial Account作成
下記を参考にSAP Cloud Platformのアカウントを登録します。
【参考手順】
https://developers.sap.com/tutorials/hcp-create-trial-account.html

後の手順と合わせるために、下記のリージョンの選択においては、チュートリアルに合わせて`Europe(Frankfurt) - AWS`を選択するのがお勧めです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/fd2f7b59-30c9-1c86-6b5f-ebf3c9d39475.png)

## 3-2:SAP Business Application の有効化
下記を参考に、SAP Business Applicationを`Subscribed`の状態にします。

【参考手順】
https://developers.sap.com/tutorials/appstudio-onboarding.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/a959b33a-636f-6d7c-1670-0c886e3ece6b.png)

## 3-3:SAP Gateway Demo Serverの登録
SAPのODataを扱うためのデモ環境である、SAP Gateway Demo Server(ES5)の登録をします。

【参考手順】
https://developers.sap.com/tutorials/gateway-demo-signup.html
https://developers.sap.com/tutorials/cp-portal-cloud-foundry-gateway-connection.html

ぱっと見SAP GUIと同じでTCODEを入れればなんでもできそうな気がしますが、以下のようなことは**できません**。

* SE38でABAP開発をする
* VA01で受注登録をする
* SE11でTableを作成する

あくまでODataを抽出するためのテスト用の環境と言う事のようです。

登録ができたらODataが取得できるか確認してみましょう。
ブラウザの別タブを開けて下記のURIを入力します。

`https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata`

下記のようなデータが取得できていればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/9c90a8df-14ac-45b8-ed73-44beb34fb39f.png)

metadataの読み方や、ODataの値の取得方法については、下記のリンクを参照。
https://qiita.com/Auggie_2345/items/adeb74b09d9d54a8f865

## 3-4:Dev Spaceの作成
Dev Space(Fiori開発のためにセットアップされた開発環境)の作成を行います。
以下の手順通りに操作してください。

【参考手順】
https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html

ちなみにこのDevSpaceですが、実体はDebianのインスタンスとなっている模様です。
下記のコマンドで確認してみましょう。
ツールバーからTerminal>New Terminalを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/03024e77-ce8f-beda-a24c-1da006541f0c.png)

ターミナルが立ち上がるので、次のコマンドでOSのバージョン確認が可能です。

```
user: user $ cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"
```

## 3-5:Fioriアプリケーションをプロジェクトテンプレートから作成
**【特記事項】
てっとりばやくアプリケーションを動かしたい場合は、下記の方法でGitからCloneし、手順3-5-1~3-6はスキップしても良い。
https://qiita.com/Auggie_2345/items/ae6b8084bbc000d52342**

テンプレートからFioriアプリケーションを作成し、一からビューやコントローラーを作成したい場合は以下手順3-5-1~3-6を行う。

【参考手順】
https://developers.sap.com/tutorials/sapui5-101-create-project.html

### 3-5-1:Create project from template
Welcome画面から、`Create project from template`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7e0bf771-7319-5c69-e6ec-235e0d1177b3.png)

Welcome画面が無い、あるいは×ボタンで消してしまった場合、View>Find Commandを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/9a656068-e411-bdf3-b26f-389a3773968e.png)

表示されたボックスで`we`と入力し、`WelcomePage`を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/f2a7b1b1-14bc-59da-58e2-d13507d9b464.png)


### 3-5-2:Select Template and Target Location
Business Application StudioでテンプレートからFioriを開発する場合、次の選択肢がある。

* SAP Fiori Elements Application
アプリケーション全体をテンプレートから作成。
今回は触れませんがFioriElementについて学びたい方は書きを参照。
https://developers.sap.com/group.fiori-tools-odata-v4-incident.html

* SAP Fiori Free Style Project
UI5のフレームワークをテンプレートから作成し、ビューやコントローラーなどのファイルはフリースタイルで作成。

今回は、`SAP Fiori Free Style Project`を選択してNextを押下する。

※残りは、いじった事ないのでわかりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/e020fab8-3f32-d8f4-adf5-79a45447c58e.png)

### 3-5-3:Target Running Environment
次のように選択してNextを押下

|項目|選択|
|:----|:----|
|Select the target running environment|Cloud Foundry|
|Select the template you want to use*|SAPUI5 Application|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7e061772-fdd0-6c22-800c-e73a6b8e1563.png)


### 3-5-4:Project Name
`SalesOrder`と入力してNextを押下

### 3-5-5:HTML 5 Application Runtime
下記のように選択してNext

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/a56f78ad-dc25-b3e4-3aa5-580f7d5679b9.png)

### 3-5-6:Basic Attributes
下記のように選択してNext

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/a639c707-3497-ed3a-8840-7c0bbdb504c9.png)

### 3-5-7:View Name
下記のように選択してNext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/b02380f3-9394-9d0a-a928-8cd41ba877c4.png)

### 3-5-8:Consume Services
下記のように選択してNext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7c8efaf7-accd-2b93-1283-e1737b36ec16.png)

画面右下の`Open in New Workshop`を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/e4e34394-a8fa-99cd-fdf5-c379ae54bb12.png)

WebIDEが再起動する。
ファイル群が作成されている事を確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/668d611a-9225-b11a-040d-c608f674ae59.png)


ここで、DevSpaceがDestination(ES5)からデータを取得できているか確認します。
Terminal>New Terminalを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/e3d11341-1237-887c-c7eb-5dc71b923003.png)

こちらのコマンドで値が取れていれば成功

```
curl -v -i "ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1"
```

```
user: FioriDemo $ curl -v -i "ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1"
* Expire in 0 ms for 6 (transfer 0x558c66349f50)
* Uses proxy env variable no_proxy == 'localhost,127.0.0.1,github.com,.github.com,.npmjs.org,.yarnpkg.com,npm.sap.com,.maven.apache.org'
* Uses proxy env variable http_proxy == 'http://127.0.0.1:8887'
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Expire in 200 ms for 4 (transfer 0x558c66349f50)
* Connected to 127.0.0.1 (127.0.0.1) port 8887 (#0)
> GET http://ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1 HTTP/1.1
> Host: ES5.dest
> User-Agent: curl/7.64.0
> Accept: */*
> Proxy-Connection: Keep-Alive
> 
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Cache-Control: no-store, no-cache
Cache-Control: no-store, no-cache
< Content-Type: application/atom+xml;type=feed; charset=utf-8
Content-Type: application/atom+xml;type=feed; charset=utf-8
< Dataserviceversion: 2.0
Dataserviceversion: 2.0
< Date: Sun, 22 Nov 2020 12:38:30 GMT
Date: Sun, 22 Nov 2020 12:38:30 GMT
< Sap-Metadata-Last-Modified: Sat, 02 Mar 2019 03:01:29 GMT
Sap-Metadata-Last-Modified: Sat, 02 Mar 2019 03:01:29 GMT
< Sap-Processing-Info: ODataBEP=,crp=,st=,MedCacheHub=Table,MedCacheBEP=SHM,codeployed=X,softstate=
Sap-Processing-Info: ODataBEP=,crp=,st=,MedCacheHub=Table,MedCacheBEP=SHM,codeployed=X,softstate=
< Set-Cookie: 

(Omission)

< Strict-Transport-Security: max-age=31536000; includeSubDomains; preload;
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload;
< Vary: Accept-Encoding
Vary: Accept-Encoding
< X-Frame-Options: SAMEORIGIN
X-Frame-Options: SAMEORIGIN
< X-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
X-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
< X-Vcap-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
X-Vcap-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
< Transfer-Encoding: chunked
Transfer-Encoding: chunked

< 
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xml:base="https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/"><id>https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet</id><title type="text">BusinessPartnerSet</title><updated>2020-11-22T12:38:30Z</updated><author><name/></author><link href="BusinessPartnerSet" rel="self" title="BusinessPartnerSet"/><entry m:etag="W/&quot;datetime'2020-11-22T03%3A01%3A17.0000000'&quot;"><id>https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet('0100000000')</id><title type="text">BusinessPartnerSet('0100000000')</title><updated>2020-11-22T12:38:30Z</updated><category term="GWSAMPLE_BASIC.BusinessPartner" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/><link href="BusinessPartnerSet('0100000000')" rel="edit" title="BusinessPartner"/><link href="BusinessPartnerSet('0100000000')/ToSalesOrders" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToSalesOrders" type="application/atom+xml;type=feed" title="ToSalesOrders"/><link href="BusinessPartnerSet('0100000000')/ToContacts" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToContacts" type="application/atom+xml;type=feed" title="ToContacts"/><link href="BusinessPartnerSet('0100000000')/ToProducts" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToProducts" type="application/atom+xml;type=feed" title="ToProducts"/><content type="application/xml"><m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"><d:Address m:type="GWSAMPLE_BASIC.CT_Address"><d:City>Walldorf</d:City><d:PostalCode>69190</d:PostalCode><d:Street>Dietmar-Hopp-Allee</d:Street><d:Building>16</d:Building><d:Country>DE</d:Country><d:AddressType>02</d:AddressType></d:Address><d:BusinessPartnerID>01* Connection #0 to host 127.0.0.1 left intact
00000000</d:BusinessPartnerID><d:CompanyName>SAP</d:CompanyName><d:WebAddress>http://www.sap.com</d:WebAddress><d:EmailAddress>do.not.reply@sap.com</d:EmailAddress><d:PhoneNumber>0622734567</d:PhoneNumber><d:FaxNumber>0622734004</d:FaxNumber><d:LegalForm>SE</d:LegalForm><d:CurrencyCode>EUR</d:CurrencyCode><d:BusinessPartnerRole>01</d:BusinessPartnerRole><d:CreatedAt>2020-11-22T03:01:17.0000000</d:CreatedAt><d:ChangedAt>2020-11-22T03:01:17.0000000</d:ChangedAt></m:properties></content></entry></feed>
```

値が取れていなければ、SAP Gateway Demo Server(ES5)にログインし直す。

## 3-6:View/Routes/Target/Controllerの作成

【参考】
https://developers.sap.com/tutorials/appstudio-fioriapps-create.html

webapp>webapp>viewにファイルを作成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/19475394-75e7-8bf7-b06f-4862646db28e.png)

ファイル名は`List.view.xml`とする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7344c934-1807-222f-63ca-aa6c1a561540.png)

以下のURLのソースを`List.view.xml`に貼り付ける。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/List.view.xml

同様にファイル`Detail.view.xml`を作成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/62e4f965-82d3-5fe1-92e6-e95a822b2873.png)

`Detail.view.xml`に以下のURLのソースを貼り付ける。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/Detail.view.xml

以下のURLのソースをwebapp>webapp>view.App.view.xmlにコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/App.view.xml

webapp>webapp>controllerに`List.controller.js`を作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/4176fb7d-4d2d-315b-c34b-7ca46c42e598.png)

以下のURLのソースを`List.controller.js`にコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/controller/List.controller.js

webapp>webapp>controllerに`Detail.controller.js`を作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/3cbe39f9-c007-6734-3065-573f1515c050.png)

以下のURLのソースを`Detail.controller.js`にコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/controller/Detail.controller.js

webapp>webapp>manifest.jsonを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/1d18703a-3a94-28bd-fde5-a902782ca05f.png)
以下のURLのソースを`manifest.json`にコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/manifest.json


## 3-7:Run Configuration/プログラムの実行
下記を参考にプログラムを実行します。
【参考手順】
https://developers.sap.com/tutorials/sapui5-101-create-project.html

もしこんな感じでデータが取れなかった場合、ES5に再度ログインすれば良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/982d0d94-92b8-e393-a456-ddeb49418f03.png)

MetadataのURLを叩いて、ES5のIDPWで認証する。
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378457/7e97872e-e12d-4ce0-b7b0-8bd72417e41a.png)


## 3-8:プログラムのデプロイ

以下のチュートリアルを参照。
https://developers.sap.com/tutorials/appstudio-fioriapps-mta-build-deploy.html

# 4:参考
FioriもといUI5の文法についてはこちらのリンクを参照してください。
https://sapui5.hana.ondemand.com/

以上。