SAPUI5 Application Consuming OData service with SAP WEB IDE

[Former Member]

Pre-requisites

1.HCP(Hana Cloud Platform)Account with SAP WEB IDE enabled.

Steps

1. Configure OData destination.I am using northwind OData service.From HCP cockpit choose destinations->New Destinations

2.Start SAPWebIDE from Services of HCP cockpit

3.From SAP Web IDE menu select File->New->Project from Template

4.Select 'SAPUI5 Application template'.From Available versions we have two options SAPUI5 Innovation and SAPUI5 1.28.Select SAPUI5 1.28

5.Give a meaningful project name.I am giving OdataConsumingApp.Leave namespace empty.Click Next.select view type XML and name view1(we are not changing it).Click Next.Click Finish.A new project will be created in workspace.

6.Right Click Application->New->OData Service.

7.Select Service URL from sources.Then Select Odata service from dropdown menu.If you dont see your service in drop down check step 1.Type in service URL and click play button.If no error occur we can see service details in right side of the service selection.Click Next. Click Finish.Now the selected OData service is connected to our App.

8.Its time to do some coding.Open component.js in code editor by double clicking.Paste below code in init method after the call to the base component.This is for accessing the service url from the config and creating an OData model and setting it to application.

9.Now we will add some code for view.Open View1.view.xml.Paste below code  inside Page's content aggregation.We are using a list and binding it to Categeries  enitityset of northwind OData service.

10.See our application in action.Right Click on Application->Run->Run As->Web  Application.