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:
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
In the next step, I will add the service to front end server and maintain it using transaction /IWFND/MAINT_SERVICE.
Click ‘Add service’ button:
In the next screen, maintain system alias, Technical service name and retrieve the service by clicking ‘Get Services’ button:
Once the service is retrieved, click ‘Add Selected services’
Test the service in front end server by clicking ‘Gateway client’ button:
Services returns expected results:
Next step is to create UI5 application, follow below steps to create application in eclipse:
Choose Application project from SAPUI5 Application Development
Give Project name, choose library as sap.m.commons and proceed further..
Enter view name and choose development paradigm as ‘Java script’:
After clicking ‘Finish’ button, Project is generated with following artifacts:
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..
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
Test the application, table is displayed without data as expected.
Let’s bring the UI5 application into SAP as BSP application. Follow next steps to achieve that:
Give a name to your application (Should be less than 15 characters)
Choose ‘WebContent’ folder of your project created in eclipse:
Confirm the upload of UI5 application into SAP by clicking the green link in the bottom of the screen:
Enter some description and package..
UI5 application has been uploaded into SAP and created as BSP application:
Execute the application to see the results as shown below: