CRUD Application with SAPUI5 Using external service and Ajax Call

CRUD operations are the very essential things which are required in most of the UI5 applications. We already explained the ways of implementing CRUD operations on local JSON data. In this post we are going to explain how to implement CRUD operations to UI5 application with external or remote OData service using AJAX calls.

This post covers

  • Creating the User Interface
  • Creating the project
  • Setting up the SAPUI5 bootstrap and required libraries
  • Creating the view components

External OData Service URL: http://services.odata.org/V3/(S(javsoqela2hqsduwyhasapr2))/OData/OData.svc

OData service response XML screenshot:

crud6
In our demo application we are using Products entity set of oData service.

  1. Create SAPUI5 MVC project in eclipse.crud1crud2crud3
  2. Project structure should look like following screenshot.crud4
  3. Configure the SAPUI5 bootstrap with required libraries in index.htmlindex
  4. Create the view components to display the OData service data
  • sap.m.Page : As a container.
  • sap.m.Table : To display the Data in table format.
  • sap.m.Label : To display the table header.
  • sap.m.Text & sap.m.RatingIndicator : To display the table content/data.
  • sap.m.Button : To perform some actions like CREATE, READ, UPDATE, DELETE.
  • Binds the /Products service to the table controller.

You can read more about using different controllers in table [here].

Output:
crud7

 

onInit function:

Here we are defining the OData model and setting to core.

Create record Functionality:

  1. Onclick on Create button, Dialog will open with simple form to enter new Product details.
  2. Enter the product details and click on Save.
  3. On click of SAVE button, an object(oEntry) is created.
  4. Using AJAX call POST method we are creating new product.

Create Record Output:
odata_crud_create

Edit Record Functionality:

  1. Onclick on Edit button, It will check the row is selected or not.
  2. if not selected, An message will be displayed “Please Select a row to update”.
  3. if selected an dialog will open with form data contains selected row detail.
  4. After editing click on SAVE button.
  5. Using Product ID we are updating the modified product data using AJAX call PUT method.

Update Function Demo:
odata_crud_edit

Delete Function Implementation:

  1. Onclick on Delete button, It will check the row is selected or not.
  2. if not selected, An message will be displayed “Please Select a row to delete”.
  3. if selected an confirm message box will open with two option YES or NO.
  4. if YES the selected product will be deleted using AJAX call DLETE method.

Delete record demo:
odata_crud_delete