The SAP UI5 application we developed needs to consume an OData service and request the service to get a series of purchase order data and display it on the UI5 application. Therefore, you need to apply for a user account on ES5 where the OData service resides.

Application link:

Register.sapdevcenter.com/SUPSignForm…

After the application is complete, you can log in to the system through the webUI.

OData service address:

Sapes5.sapdevcenter.com/sap/opu/oda…

Log in to the SAP cloud platform and create a Destination pointing to ES5:

Open WebIDE for SAP cloud platform, create a new project and create a SAP UI5 application based on template:

Right-click the menu and create a new OData service:

Select the newly created Destination from the dropdown menu of the Service Catalog to bring up all OData services deployed on the ES5 server to which the Destination points:

Select purchase Order OData service:

WebIDE will help us generate a skeleton UI5 application, just hit the Run button and try to run it:

The metadata of the OData service can be retrieved successfully in Chrome developer Tools:

XML view implementation code:

<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>
Copy the code

After implementing the XML view code above, the entire application looks like this:

Finally, deploy the application from WebIDE to SAP cloud via the right-click menu:

Successful deployment:

Controller source code for the application:

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>Copy the code

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: