我們開發的這個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的原創文章，請關注公眾號"汪子熙":
