一步步使用SAP云平台的WebIDE开发SAP UI5应用

我们开发的这个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>

在SAP云平台WebIDE里新建一个UI5应用并本地运行通过后，在webapp文件夹下打开manifest.json文件，进入navigation区域，semantic object维护成data，action维护成display：

Inbound tile的title维护成如下：

为了将该应用部署到SAP Cloud Platform的Fiori Launchpad，还需要创建一个SAP Fiori Launchpad Site Module：

取名为Launchpad：

在该Launchpad module的CommonDataModel.js里进行编辑：

将之前创建的UI5应用加到该Launchpad module的group里：

最后的成果：我们的UI5应用出现在Fiori Launchpad里：

https://digital-innovation-space-jerry-subdomain-dev-mta-fiorid19463570.cfapps.eu10.hana.ondemand.com/cp.portal/site#Shell-home

点击tile能够访问了：