我們開發的這個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 TUTORIALonClickPO: 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应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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