Skip to Content
Author's profile photo rajeesh o

SAPUI5 Application Consuming OData service with SAP WEB IDE

Prerequisites

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

destinationConfig.png

2.Start SAPWebIDE from Services of HCP cockpit


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

/wp-content/uploads/2016/04/1_928686.png

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.

/wp-content/uploads/2016/04/7_928687.png

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.

/wp-content/uploads/2016/04/8_928688.png

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.

compoCode.PNG

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.

xmlcode.PNG

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

Assigned tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ramya A.R
      Ramya A.R

      Good one Rajeesh.

      I just tried creating a sample application following the above mentioned steps.But after selecting the Service Url from the sources I'm not able to find the service in the dropdown even after typing the Url there. How should I find it?

      Author's profile photo rajeesh o
      rajeesh o
      Blog Post Author

      Hi Ramya ,

      did you configure destination as mentioned in first step?

      see SAPUI5 Application Consuming OData service with SAP WEB IDE PART-1 - SAP ABAP,SAPUI5,SAP HANA,SAP Fiori,OData,Netweaver …

      for more details

      Author's profile photo Ramya A.R
      Ramya A.R

      Hi Rajeesh,

      Yes,I had configured the destination.But I forgot to select the SAPUI5 1.28 version during template selection.Now I'm able to get the list.

      Thanks Rajeesh.

      Author's profile photo rajeesh o
      rajeesh o
      Blog Post Author

      If you are using latest version of sapui5.You can set the model in manifest.json under models section by following code

      after adding the service to the app

      "models": {
                  "" : {
                        "dataSource": "<servicename>"
                  }

      If you are a beginner to sapui5 visit

      Developing Web Apps with SAPUI5 -

      Author's profile photo Gowthami Bhogireddy
      Gowthami Bhogireddy

      Hello Ramya

      I am newbie to SAP UI5. What is the importance of selecting the 1.28 version only here?

      As you have said, even my destination got displayed under the service drop down after I selected the version 1.28.

      Author's profile photo Former Member
      Former Member

      You may be interested in reading this: SAP Web IDE local development with SAP HANA On Premise

      Author's profile photo Kabir Mohammad
      Kabir Mohammad

      Hi Rajesh,

      Step 1-

      WebIDEenables. TRUE

      New Destination I have a added a 3rd party web services.   Connection TEST Response returned 200 "OK".

      Step.2... followed your steps

      Step.3....followed your steps

      Step 4..  I have couple of new options.

      1.50, 1.52, .144, & 1.38

      I check will all the combinations, I am not able to see  my destination I created.

      Note: the 3rd party web services that I have integrated is not a oData.

      Where is the missing link.!!