我們開發的這個SAP UI5應用需要消費一個OData服務，請求該服務得到一系列采購訂單的數據，再顯示到UI5應用上。所以需要先申請該OData服務所在的服務器ES5上的用戶。

申請鏈接：

https://register.sapdevcenter.com/SUPSignForms/

申請完畢后，可以通過webUI進入該系統。

OData服務的地址：

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PO_APV/PurchaseOrders?$format=json

登錄SAP云平臺，創建一個指向ES5的Destination：

打開SAP云平臺的WebIDE，新建一個項目，基于template創建一個SAP UI5應用：

右鍵菜單，新建一個OData服務：

從service catalog的下拉菜單里選擇剛剛創建的Destination，能帶出該Destination指向的ES5服務器上部署的所有OData服務：

選擇采購訂單OData服務：

WebIDE會幫我們生成一個UI5應用的骨架，直接點run按鈕試著運行：

在Chrome開發者工具里看到OData服務的metadata已經可以成功取回了：

XML視圖的實現代碼：

<mvc:View controllerName="com.sap.PurchaseOrderApp.controller.Mainview" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page title="Purchase Orders">
					<!-- INSERT IN STEP 3 OF THE NEXT TUTORIAL -->
					<content>
						<List noDataText="No purchase orders found" items="{/PurchaseOrders}">
							<StandardListItem type="Navigation" title="{POId}" description="{SupplierName}" press="onClickPO"/>
						</List>
					</content>
				</Page>
				<!-- INSERT CODE IN STEP 5.2 HERE -->
			</pages>
		</App>
	</Shell>
</mvc:View>

將上面的xml視圖代碼實現之后，整個應用的外觀如下：

最后通過右鍵菜單將這個應用從WebIDE部署到SAP云平臺：

部署成功：

該應用的controller源代碼：

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";

	return Controller.extend("com.sap.PurchaseOrderApp.controller.Mainview", {
		onInit: function () {

		}, // INSERT IN STEP 2 OF THE NEXT TUTORIAL
		onClickPO: function (oEvent) {
				var oApp = this.getView().getContent()[0].getApp();
				var sBindingPath = oEvent.getSource().getBindingContext().getPath();
				var oDetailsPage = oApp.getPages()[1].bindElement(sBindingPath);
				oApp.to(oDetailsPage.getId());
			}
			// INSERT CODE IN SUB-STEP 6.2 HERE
	});
});


<mvc:View controllerName="com.sap.PurchaseOrderApp.controller.Mainview" xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:f="sap.ui.layout.form" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page title="Purchase Orders">
					<!-- INSERT IN STEP 3 OF THE NEXT TUTORIAL -->
					<content>
						<List noDataText="No purchase orders found" items="{/PurchaseOrders}">
							<StandardListItem type="Navigation" title="{POId}" description="{SupplierName}" press="onClickPO"/>
						</List>
					</content>
				</Page>
				<!-- INSERT CODE IN STEP 5.2 HERE -->
				<Page id="details" title="Details" navButtonPress="onNavButtonPress" showNavButton="true">
					<f:SimpleForm columnsM="1" editable="false" layout="ResponsiveGridLayout" singleContainerFullSize="false">
						<f:content>
							<!-- INSERT CODE IN SUB STEP 5.3 HERE -->
							<Label text="Purchase Order ID" width="100%">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{POId}"/>
							<Label text="Supplier Name">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{SupplierName}"/>
							<Label text="OrderedByName">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{OrderedByName}"/>
							<Label text="DeliveryAddress">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{DeliveryAddress}"/>
							<Label text="GrossAmount">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{GrossAmount}"/>
							<Label text="CurrencyCode">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{CurrencyCode}"/>
							<Label text="ItemCount">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{ItemCount}"/>
							<Label text="Changed At">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{ChangedAt}"/>
							<Label text="DeliveryDateEarliest">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{DeliveryDateEarliest}"/>
							<Label text="LaterDelivDateExist">
								<layoutData>
									<layout:GridData span="L4 M4"/>
								</layoutData>
							</Label>
							<Text text="{LaterDelivDateExist}"/>
						</f:content>
					</f:SimpleForm>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的一步步使用SAP云平台的WebIDE开发SAP UI5应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。