May 21

First SAPUI5 / OData Application

In this blog, I will create a OData service and consume it in SAP UI5 application:

  • Creating a oData Service in transaction SEGW 
  • Activating the oData service in Tx- /IWFND/MAINT_SERVICE
  • Build a UI5 application(Table)  in Eclipse which uses the oData service
  • Uploading the UI5 application as BSP application in ABAP Repository
  • Test the application and verify the results

I have created the OData service in backend system as shown in below screenshot:

2017-05-22 14_38_26-183.82.114.111_3333 - Remote Desktop Connection

Refer to the blog OData Basics – Part 1 (Entity Data Model) for the steps to create a OData service..

  • I have created OData entity model (Entity types, entity sets)
  • Generated run time artifacts
  • Activated the service in transaction /IWFND/MAINT_SERVICE

2017-05-22 14_52_19-183.82.114.111_3333 - Remote Desktop Connection

In the next step, I will add the service to front end server and maintain it using transaction /IWFND/MAINT_SERVICE.

2017-05-22 14_52_59-183.82.114.111_3333 - Remote Desktop Connection2017-05-22 14_53_27-183.82.114.111_3333 - Remote Desktop Connection

Click ‘Add service’ button:

2017-05-22 14_54_07-183.82.114.111_3333 - Remote Desktop Connection

In the next screen, maintain system alias, Technical service name and retrieve the service by clicking ‘Get Services’ button:

2017-05-22 14_55_07-183.82.114.111_3333 - Remote Desktop Connection

Once the service is retrieved, click ‘Add Selected services’

2017-05-22 14_55_49-183.82.114.111_3333 - Remote Desktop Connection

Test the service in front end server by clicking ‘Gateway client’ button:

2017-05-22 14_56_27-183.82.114.111_3333 - Remote Desktop Connection

Services returns expected results:

2017-05-22 14_57_09-183.82.114.111_3333 - Remote Desktop Connection

Next step is to create UI5 application, follow below steps to create application in eclipse:

2017-05-22 15_05_26-183.82.114.111_3333 - Remote Desktop Connection

 

Choose Application project from SAPUI5 Application Development

2017-05-22 15_06_03-183.82.114.111_3333 - Remote Desktop Connection

Give Project name, choose library as sap.m.commons and proceed further..

2017-05-22 15_07_25-183.82.114.111_3333 - Remote Desktop Connection

Enter view name and choose development paradigm as ‘Java script’:

2017-05-22 15_08_06-183.82.114.111_3333 - Remote Desktop Connection

After clicking ‘Finish’ button, Project is generated with following artifacts:

  • index.html
  • <viewname>.controller.js
  • <viewname>.view.js

2017-05-22 15_08_58-183.82.114.111_3333 - Remote Desktop Connection

Define the table in view as shown below:

  • oTable has been instantiated as table
  • oCol1 through oCol4 were instantiated as columns. In bindProperty, make sure the exact field names from OData entity are binded to columns..

2017-05-22 15_12_02-183.82.114.111_3333 - Remote Desktop Connection

In the next screenshot, 

  • Columns defined in previous step were added to the table,
  • OData service has been defined as json model,
  • that model was set to table and 
  • finally, rows of the table were bound to the entity set of OData service

2017-05-22 15_13_04-183.82.114.111_3333 - Remote Desktop Connection

Test the application, table is displayed without data as expected.

2017-05-22 15_29_18-183.82.114.111_3333 - Remote Desktop Connection

Let’s bring the UI5 application into SAP as BSP application. Follow next steps to achieve that:

2017-05-22 15_29_53-183.82.114.111_3333 - Remote Desktop Connection

Give a name to your application (Should be less than 15 characters)

2017-05-22 15_30_47-183.82.114.111_3333 - Remote Desktop Connection

Choose ‘WebContent’ folder of your project created in eclipse:

2017-05-22 15_31_47-183.82.114.111_3333 - Remote Desktop Connection

Confirm the upload of UI5 application into SAP by clicking the green link in the bottom of the screen:

2017-05-22 15_32_02-183.82.114.111_3333 - Remote Desktop Connection

Enter some description and package..

2017-05-22 15_32_37-183.82.114.111_3333 - Remote Desktop Connection

 

UI5 application has been uploaded into SAP and created as BSP application:

2017-05-22 15_33_25-183.82.114.111_3333 - Remote Desktop Connection

Execute the application to see the results as shown below:

2017-05-22 15_34_43-183.82.114.111_3333 - Remote Desktop Connection