我们开发的这个SAP UI5应用需要消费一个OData服务，请求该服务得到一系列采购订单的数据，再显示到UI5应用上。所以需要先申请该OData服务所在的服务器ES5上的用户。
申请链接：
https://register.sapdevcenter...
申请完毕后，可以通过webUI进入该系统。
OData服务的地址：
https://sapes5.sapdevcenter.c...$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的原创文章，请关注公众号"汪子熙":
