ODataV4のODataをMockServerで確認する

この記事は chillSAP 夏の自由研究2021 の記事として執筆しています。

#はじめに
SAPUI5にてODataV4を使ったMockserverを利用する手順を記事として投稿させていただきます。
mockserver.jsはODataV4に対応していないため、下記を用います。
https://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware

#package.jsonを変更する
package.jsonに@sap/ux-ui5-fe-mockserver-middlewareが含まれていることを確認する

package.json

	"devDependencies": {
		"@ui5/cli": "^2.10.1",
		"@ui5/fs": "^2.0.6",
		"@ui5/logger": "^2.0.1",
		"@sap/ux-ui5-tooling": "1",
		"rimraf": "3.0.2",
		"@sap/ux-ui5-fe-mockserver-middleware": "^1"
	},
	"ui5": {
		"dependencies": [
			"@sap/ux-ui5-tooling",
			"@sap/ux-ui5-fe-mockserver-middleware"
		]
	}

#ui5.yamlを変更する
ui5.yamlでsap-fe-mockserverを設定します

ui5.yaml

server:
  customMiddleware:
  - name: sap-fe-mockserver
    mountPath: /
    afterMiddleware: compression
    configuration:
      service:
        urlBasePath: '/sap/opu/odata'
        name: 'testSRV'
        metadataXmlPath: './webapp/localService/metadata.xml'
        mockdataRootPath: './webapp/localService/data'

urlBasePath

ODataのURL(サービス名の前まで)

name

ODataのサービス名

metadataXmlPath

metadata.xmlのパス

mockdataRootPath

モックデータのパス

　例：/sap/opu/odata/testSRVの場合
　　　urlBasePath ：/sap/opu/odata
　　　name ：testSRV

#metadata.xml
ui5.yamlにてmockdataRootPathで設定したディレクトリにmatadata.xmlを保存します。
今回は適当にProductsという以下のようなEntityを用意しています。

metadata.xml

            <EntityType Name="Products">
                <Key>
                    <PropertyRef Name="productId"/>
                </Key>
                <Property Name="productId" Type="Edm.String" MaxLength="10" Nullable="false"/>
                <Property Name="productName" Type="Edm.String" MaxLength="20"/>
                <Property Name="productCategory" Type="Edm.String" MaxLength="20"/>
            </EntityType>

#データを作成する
ui5.yamlにてmockdataRootPathで設定したディレクトリに対応したEntity名のjsonファイルを保存します。

Products.json

 [{
         "productId": "1",
         "productName": "テスト1",
         "productCategory": "Cat1"
     },
     {
         "productId": "2",
         "productName": "テスト2",
         "productCategory": "Cat2"
     },
     {
         "productId": "3",
         "productName": "テスト3",
         "productCategory": "Cat3"
     }
 ]

現段階では以下のようなファイル構造になっています。

#Tableでデータが表示できることを確認する
コンテンツ部分には以下のようなテーブルを配置します。

Main.view.xml

						<Table id="sampleTable" inset="false" items="{
                        　　　　　path: 'V4Model>/Products'
                    　　　　　　　　　　　　}" class="sapFDynamicPageAlignContent" width="auto">
							<columns>
								<!-- ID -->
								<Column >
									<Text text="ID"/>
								</Column>
								<!-- 名前 -->
								<Column >
									<Text text="名前"/>
								</Column>
								<!-- カテゴリ -->
								<Column >
									<Text text="カテゴリ"/>
								</Column>
							</columns>
							<items>
								<ColumnListItem>
									<cells>
										<!-- ID -->
										<ObjectIdentifier text="{V4Model>productId}" />
										<!-- 名前 -->
										<Text text="{V4Model>productName}" wrapping="false" />
										<!-- カテゴリ -->
										<Text text="{V4Model>productCategory}" wrapping="false" />
									</cells>
								</ColumnListItem>
							</items>
						</Table>

その後、画面を起動してみます。

無事データが確認できました。

#まとめ
MockServerにてOdataV4の動作を確認することができました。
訳あってバック側のAPIを抜きにUI側のデータ動作をデバッグしたいときに便利なのでご参考までに。