【SAPUI5】OData(9) ODataを使ったSAPUI5アプリケーションの作り方 開発編-2

##概要
[前回](https://qiita.com/tami/items/3990f98f5cb10818be52)の続きで、受注伝票の一覧を表示するアプリを作成します。

※OData関連の投稿一覧は以下の記事をご参照ください。
[【SAPUI5】OData(1) ODataとは](https://qiita.com/tami/items/411a226d1ea6bb25b5f1)

##ステップ
＜前回の内容＞
1. テンプレートからアプリを作成
2. データソース（OData）を指定

＜今回の内容＞
3. ビューのレイアウトを作成

###3. ビューのレイアウトを作成
ステップ1で自動登録されたビューSalesOrder.view.xmlを開きます。普通に開くとxml形式ですが…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/947485d0-dd84-4a63-2559-6ca684aa4c72.png)

ファイルの上で右クリックして"Open Layout Editor"を選択すると、レイアウトエディタが開きます。左側のパネルからドラッグ&ドロップでUI要素を配置し、右側のパネルでODataとひもづけることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/10bfcb82-cd20-2e5f-e6fb-3ee80de904de.png)

検索窓でlistと打ってListコントロールを検索し、ドラッグして画面に配置します。
<img width="506" alt="drag.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/3b32fc1f-c4b7-fe37-211d-39dd45e5a539.png">

####ODataのEntity Setをバインド
バインドとは、画面の要素に対してデータを割り当てることです。
右側のパネルのEntity Setのところにあるアイコンをクリックします。
<img width="750" alt="bind.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/6f9e3e1d-2d48-58ea-2c3a-8300c71448d6.png">


ポップアップで以下のようにEntity SetにSalesOrderSetを指定します。ついでにソート順をSalesOrderID順にしておきます。Bindボタンを押してバインドを登録します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/d198db43-74dc-e02b-8cac-bd90558cae36.png)

####リストに表示するプロパティを選択
デフォルトでは、リストに表示される要素には固定値が設定されています。（右側のパネルのTitile, Description, Icon）Title, DescriptionにSalesOrderのプロパティを設定していきます。まずは、Descriptionの横にあるアイコンをクリックします。
<img width="503" alt="bind2.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/d8807dfb-18c7-b133-e19e-d7800b25f1fc.png">

もともと入っている値を消して、左側のリストからSalesOrderIDを選んでダブルクリックします。今回は1つのプロパティだけをバインドしますが、複数バインドすることもできます。
<img width="719" alt="property.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/949018f0-2596-6fbd-b8f7-7d980827983b.png">

SalesOrderIDが持ち込まれました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/2d4a8379-fd3c-a05b-3dbd-62476f8705e8.png)

同様にして、DescriptionにCustomorNameをバインドします。Iconは使わないのでクリアしてしまいます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/d86dd2c3-7e5f-6548-4a77-b12967aeb87c.png)

##実行してみる
この時点でアプリを実行してみます。うまくいけば受注伝票の一覧が表示されるはずですが…
<img width="949" alt="err.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/8159a22f-71f0-9f6f-5ef2-afca744823a9.png">

エラーになってしまいました。エラー内容を見るとmetadataにアクセスするときに以下のURIを指定しているようです。
https://webidetesting7474787-pxxxxxxxxxxtrial.dispatcher.hanatrial.ondemand.com/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata?sap-language=JA

正しいURIは
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata
なので、URIの指定が正しくできていないということになります。

##トラブルシューティング
datasourceの指定をしているのはmanifest.jsonなので、ここに原因がありそうです。datasouceのuriに指定している`/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/`という部分がそのままmetadataへのアクセス時に使われているようです。

```json
		"dataSources": {
			"GWSAMPLE_BASIC": {
				"uri": "/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}
		}
```

宛先情報はSAP Cloud Platform Cockpitで設定していて、このURLでアクセスしたいのです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/a40e31c0-c5ff-0027-959b-104e535f73b7.png)

SAP Cloud Platform Cockpitの宛先を参照するためにはneo-app.jsonファイルでの設定を経由して、manifest.jsonでuriを指定します。
現状は以下のように、SAP Cloud Platform Cockpitとneo-app.json、neo-app.jsonとmanifest.jsonそれぞれの間のリンクが切れてしまっています。
有効な参照先が見つからないため、datasourcesのuriをそのまま指定する結果になってしまっていると考えられます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/8de3c7bd-13f5-12b1-5fd3-84bdb9b1e8c6.png)

###直し方
neo-app.json、manifest.jsonをそれぞれ修正して、以下の状態にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/0f0290fb-39bd-45be-0ce2-2c525d271f94.png)

neo-app.json

```json
    {
      "path": "/destinations/ES5",
      "target": {
        "type": "destination",
        "name": "ES5"
      },
      "description": "SAP Gateway ES5"
    }
```

manifest.json

```json
		"dataSources": {
			"GWSAMPLE_BASIC": {
				"uri": "/destinations/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "localService/metadata.xml"
				}
			}
		}
```

##結果
受注伝票と受注先の一覧が表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/4fc790a9-162f-8fc3-9761-f624601ca1d3.png)

datasourceの指定がデフォルトでうまくいかないのはなぜなのか、謎です。
ウィザードでData sourceを作成したとき、URIは変更不可になっていました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/5696aed1-8da8-a8be-7e22-d449d4bb7626.png)


##まとめ
ODataにアクセスするためにSAPUI5アプリ側で必要な設定は以下の通りです。
前提：SAP Cloud Platform Cockpitで宛先を登録する

1. neo-app.jsonファイルでSAP Cloud Platform Cockpitの宛先を参照する
2. manifest.jsonファイルでdatasourceを定義(1.の宛先を参照)
3. manifest.jsonファイルで上記datasourceを参照したモデルを定義
4. ビューの項目にモデルのデータをバインド

##関連記事
[OData(8) ODataを使ったSAPUI5アプリケーションの作り方 開発編-1](https://qiita.com/tami/items/3990f98f5cb10818be52)