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

[Former Member]

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.

\

b. CREATE

        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.

     

  c. UPDATE

       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 !