Skip to Content

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,

/wp-content/uploads/2016/06/1_986436.png

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.

/wp-content/uploads/2016/06/2_986437.png

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.

        /wp-content/uploads/2016/06/3_986441.png

      Perform the READ operation.

      /wp-content/uploads/2016/06/4_986442.png

         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.

/wp-content/uploads/2016/06/5_986443.png\

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.

     /wp-content/uploads/2016/06/6_986447.png

     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).

    /wp-content/uploads/2016/06/7_986448.png

        Performing the CREATE operation.


      /wp-content/uploads/2016/06/8_986449.png



  c. UPDATE

       Pass the required data to be saved as shown below.

      /wp-content/uploads/2016/06/9_986450.png

      Render the service if not rendered in same function.


     /wp-content/uploads/2016/06/10_986451.png


     Perform UPDATE.


     /wp-content/uploads/2016/06/11_986452.png


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

Thanks for reading !

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply