Introduction

During my studies of SAPUI5 with OData I got stuck with the operations in the model and data binding. So now after successfully integrate all the persistence operations I hope my experience can help somebody with the same problems.

This app is also in my HCP trial, to deploy in HCP you just need to change the persistence.xml in the persistence package.

In this sample app I will try to explain how to build an End to End application with all the basic persistence operations: Create, Read, Update and Delete.

To build this app I am using the following layers:

1. Persistence: JPA, mysql (local deploy), Hana (HCP);
2. Service: OData through Apache Olingo;
3. UI: SAPUI5 with XML views;

All the sources are available in  crudsapui5odatajpa/flight at master · allanfelipesilva/crudsapui5odatajpa · GitHub

UPDATE, version 2:

The POM.xml of persistence and the persistence.xml file are ready to build HCP running application. These files are updated in git.

To build the application you must install Apache Maven. See the tutorial Maven in 5 Minutes.

To download the source you must clone the repository. To install git see Git – Getting Started.

To clone the application just run in the command of your OS:  git clone https://github.com/allanfelipesilva/crudsapui5odatajpa.git

After git finish the download of the code you must build it with Apache Maven. Just run the following command in the folder “flight”:

mvn clean install

Done, all the modules will be ready and the .war will be generated:

The .war file will be ready in the folder flight\flight-web\target, you must upload it to HCP trial instance:

If you want to change the source code, you must create the eclipse projects in each of the app folders, go in the command line and execute the following command to create the eclipse projects:

mvn eclipse:eclipse

There will be three different projects in your eclipse one for each layer:

To import the projects in eclipse , just go to menu Import -> More -> Existing project in workspace

Persistence

The persistence layer consists of a JPA class with three properties:

• Id: integer auto generate
• Departure: String
• Destination: String

Source code:

After the creation of the class you must parametrize the persistence.xml accordingly to your setup.

You must create a schema in your database and update the URL.

Dont forget to update the user and password:

If you are using a different database driver, dont forget to update the POM.xml with your driver.

To check the persistence layer, use the tool provided by your database, in mysql command line:

Service

The service layer consists of the Apache Olingo implementation, there is one class mapped in the web.xml as a servlet with all the service layer.

The class is in the package flight-service.

The name in the property PUNIT_NAME must be the same name from your persistence.xml.

The web.xml from the flight-web pacckage must contain the mapping of this class to a servlet:

You can test the service layer though the servlet URL directly in the browser:

To get all the parameters of the persistence layer, use $metadata to check it in the end of the URL.

Now lets test all the operation with our service layer.

For some of the tests,  a REST client is necessary, such as “POSTMAN” or “Advanced Rest Client App” from chrome web store.

Read an Entity:

To list the flights in the database, just request the list of the entity:

Create an Entry

Send a POST with ID 0, the ID will be generated automatically.

Update an Entry

Send a PUT in the recently created entry:

Delete an Entry

Send a DELETE method to the URL of the entry to be deleted.

View

If the service layer is OK, all the operations can be triggered from SAPUI5.

The application consists of two pages, one for the list of Flights and another one to the Add, Delete, Update operations.

The index is below:

List View:

In the list view we will bind our OData with our sap.m.Table:

The items property must point to the collection name from OData and the row items from the properties from the $metadata:

in the controller you must set the oModel for your view with the list:

sap.ui.controller("flightweb.index", {
     onInit : function(evt) {
          this.getView().addDelegate(
                    {
                         onBeforeShow : function(evt) {
                              var oModel = new sap.ui.model.odata.ODataModel(
                                        "FlightOData.svc/");
                              evt.to.setModel(oModel);
                         }
                    });
     },

     onAdd : function(evt) {
          app.to("addflight");
     },
     onDetailPress : function(event) {
          var bindingContext = event.getSource().getBindingContext();
          var flightid = bindingContext.getProperty("Id");
          var myObject = bindingContext.getObject();
          app.to("addflight", "slide", bindingContext);

     }
});

Add Entry:

To insert a new entry,there is a button in the list,

this button will call the method onAdd in the controller.

the controller method will call the add view:

onAdd : function(evt) {
          app.to("addflight");
     },

The form must have the binding to the odata properties:

The save button will trigger the call of a POST operation in the controller:

For the creation of a new entry, the field ID will be blank, so the “createEntry” method will be called in this snippet:

The creation of a new entry is done by the code in blue:

     handleSavePress : function(evt) {
          var oModel = this.getView().getModel();           
          var vProperties = {};           
          vProperties.Id = this.getView().byId("id").getValue();           
          vProperties.Departure = this.getView().byId("departure").getValue();           
          vProperties.Destination = this.getView().byId("destination").getValue();
          if (vProperties.Id == "") {    
               vProperties.Id = 0; 
               oModel.createEntry("Flights", vProperties);
          } else {    
               var oEntry = {};   
               var mParameters = {};    
               mParameters.context = this.getView().getBindingContext();    
               mParameters.success = this._fnSuccess;    
               mParameters.error = this._fnError;    
               oEntry.Departure = vProperties.Departure;    
               oEntry.Destination = vProperties.Destination;    
               oModel.update("", oEntry, mParameters);
          }
          oModel.submitChanges(this._fnSuccess, this._fnError);          
          oModel.refresh();
},

Change Entry:

To change an entry, the method update should be triggered in the model.

in the screen the button “Save” will call the update function.

The hidden field ID in the screen will be populated with the ID of the flight, so the following code in blue will be executed:

     handleSavePress : function(evt) {
          var oModel = this.getView().getModel();           
          var vProperties = {};           
          vProperties.Id = this.getView().byId("id").getValue();           
          vProperties.Departure = this.getView().byId("departure").getValue();           
          vProperties.Destination = this.getView().byId("destination").getValue();
          if (vProperties.Id == "") {    
               vProperties.Id = 0;
               oModel.createEntry("Flights", vProperties);
          } else {    
               var oEntry = {};             
               var mParameters = {};              
               mParameters.context = this.getView().getBindingContext();              
               mParameters.success = this._fnSuccess;              
               mParameters.error = this._fnError;              
               oEntry.Departure = vProperties.Departure;              
               oEntry.Destination = vProperties.Destination;              
               oModel.update("", oEntry, mParameters);        
          }
          oModel.submitChanges(this._fnSuccess, this._fnError);
          oModel.refresh();
},

Delete an Entity:

To delete an entity, the controller will call the remove method in the model.

the following code snippet is reponsible for that:

handleDeletePress : function() {
                              var oModel = this.getView().getModel();
                              var flightid = this.getView().byId("id").getValue();
                              oModel.remove("/Flights(" + flightid + "L)");
                              oModel.refresh();
                              app.back();

                         },

Conclusion

I really hope this sample can help somebody with problems in the binding and call of model operations.

If you find any bug, or want to add more functionality please contact me so I can provide access to github.

If this somehow helped you, please like it and share