Consume NetWeaver Gateway services via SAPUI5 – Part 2

In part 1 we created a simple example of SAPUI5 integration with gateway, in this blog we enhance the user interface leveraging on navigation property of oData.

Just a short introduction to the Navigation Property from the official oData documentation: “A property of an Entry that represents a Link from the Entry to one or more related Entries. A Navigation Property is not a structural part of the Entry it belongs to.” (ref)

What does it means basically? Having a look to our Gateway Service metadata, we can see that some of our entities are characterized by navigation properties tag elements, a Navigation Property describes the relation between different entities.

In our example we focus on the FlightBookings, that links each filght to its booking collection

<NavigationProperty Name="FlightBookings"
                    Relationship="RMTSAMPLEFLIGHT_2.FlightBookings"
                    FromRole="FromRole_FlightBookings"
                    ToRole="ToRole_FlightBookings"/>

The advantage of SAPUI5 framework is that to leverage on Navigation Property we don’t need so much rework, but the library exposes these functionalities very easily.

retrieveFlight.view.js

We change the code of the JS view class adding the following lines of code just after the oData model binding

 var oModel = new sap.ui.model.odata.ODataModel(
                              "http://gw.esworkplace.sap.com/sap/opu/odata/IWBEP/RMTSAMPLEFLIGHT_2",
                                                  false,
                                                  "GW@ESW",
                                                  "ESW4GW");
          oTable.setModel(oModel);
          oTable.bindRows("FlightCollection");
//Start - Navigation property
var bookingResultPanel, oTitle;  
var rTable = new sap.ui.table.DataTable(); 
rTable.addColumn(
     new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: "Booking number"}),               
          template: new sap.ui.commons.TextView().bindProperty("text", "BookingID"),               
          sortProperty: "BookingID"  
})); 
rTable.addColumn(
     new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: "Passenger Name"}),               
          template: new sap.ui.commons.TextView().bindProperty("text", "PassengerName"),               
          sortProperty: "PassengerName"  
})); 
rTable.setVisibleRowCount(10);  
bookingResultPanel = new sap.ui.commons.Panel('bookingResultPanel');  
oTitle = new sap.ui.commons.Title('oTitle');   
oTable.attachRowSelect(function(oEvent) { 
     var currentRowContext = oEvent.getParameter("rowContext"); 
     var url = currentRowContext + "/FlightBookings"; 
     oTitle.setText('Bookings');   
     bookingResultPanel.setTitle(oTitle); 
     rTable.setModel(oModel);  
     rTable.bindRows(url); 
     bookingResultPanel.addContent(rTable);  
     layout.createRow(bookingResultPanel);
});
// End - Navigation property
rPannel.addContent(oTable); 
layout.createRow(rPannel);

Let’s try again to explain the code.

First of all we create the table object that will display the list of the booking associated to the selected flight.

var bookingResultPanel, oTitle;  
var rTable = new sap.ui.table.DataTable(); 
rTable.addColumn(
     new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: "Booking number"}),               
          template: new sap.ui.commons.TextView().bindProperty("text", "BookingID"),               
          sortProperty: "BookingID"  
})); 
rTable.addColumn(
     new sap.ui.table.Column({
          label: new sap.ui.commons.Label({text: "Passenger Name"}),               
          template: new sap.ui.commons.TextView().bindProperty("text", "PassengerName"),               
          sortProperty: "PassengerName"  
})); 
rTable.setVisibleRowCount(10);  
bookingResultPanel = new sap.ui.commons.Panel('bookingResultPanel');  
oTitle = new sap.ui.commons.Title('oTitle'); 

Here it comes the magic, we create an event listener to flight table “rowSelect” event. Once the event is thrown we get a reference to the flight that generates the event.

Each entity in oData is characterized by an unique URI (rowContext) that refers to itself, we use the rowContext to refer to an entity and its navigation properties.

In our example we want to list all the bookings related to the selected flight, so we just need to “navigate” to the FlightBookings collection referring to the FlightBookings URI and bind this resource to the Booking table.

oTable.attachRowSelect(function(oEvent) { 
     var currentRowContext = oEvent.getParameter("rowContext"); 
     var url = currentRowContext + "/FlightBookings"; 
     oTitle.setText('Bookings');   
     bookingResultPanel.setTitle(oTitle); 
     rTable.setModel(oModel);  
     rTable.bindRows(url); 
     bookingResultPanel.addContent(rTable);  
     layout.createRow(bookingResultPanel);
});

Deploy and Execute

The final result is displayed below, but it is also available in the live demo.

Warning: You have to accept Cross Origin Request on you browser, otherwise you will see empty tables

In part 3 we will use external libraries in our application.