Skip to Content

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.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. 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?

    (0) 
      1. 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.

        (0) 
        1. rajeesh o 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 –

          (0) 
        2. 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.

          (0) 

Leave a Reply