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 “: