Skip to Content
Author's profile photo Former Member

OData operations (READ, CREATE, UPDATE) from UI5 application

This blog shows how to integrate the SAP OData service and perform the data operations via a UI5 Application. 

Example scenarios: Registration/Login form for employee. In below screen shots I have used Eclipse editor to build the app.

User will enter his details and click on Register, now these details need to be saved in SAP backend using ODATA service.

  1. Code in .XML file (can be any other like .JSON,.HTML)

In the UI5 application, we would have a view consisting of required fields and button. The button tag is written as shown below,


As we need to perform some activity on pressing the button, we have given the event ‘press’ for that button and the value for that event is ‘onReg’.

We shall use this ID onReg as a function, inside this we can perform the required activity.

     2. Now in the controller (.js file), we will implement this event as a function. Inside this function, we are going to render the required Odata service and perform READ/WRITE operations.


Below are the steps:

  1. READ

       First, you need to render you Odata service.Give the URI of your ODATA service as shown in below picture.


      Perform the READ operation.


         Variable OData – Will hold the read values from the backend. This is how we perform READ operation from front-end app.

         We can access all the fields from OATA like this – odata.NAME_FIRST (here fields NAME_FIRST need to be exactly as they were defined in Odata service.



        Pass the required data to be saved in back-end. We took a variable called oEntry and here we are passing all the required fields that are to be saved.

        Note: The field names must be same as they were declared in Odata service.


     Render the service (you don’t need to render if this is already done in same function, if different function then we need to render again).


        Performing the CREATE operation.



       Pass the required data to be saved as shown below.


      Render the service if not rendered in same function.


     Perform UPDATE.


This is how we integrate the Odata service and perform required operations.

Thanks for reading !

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Chowdary Raghu
      Chowdary Raghu

      Nice blog!! Short and sweet explaining all the concepts

      Author's profile photo Chowdary Raghu
      Chowdary Raghu

      Can we practice this, create, batch service using Northwind Odata, Like Update the Table data from Front End UI5 App to Backend. If so provide an example.