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 theFlightBookings 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

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

Published by Ivan Femia

I have more than 10 yrs of experience in IT; born as Windows Basis Administrator I moved rapidly to my real passion: web programming and R&D. I have been at Techedge since 2007 and I'm head of development of Techedge Labs Team. I focused my researches in emerging technologies, mobile, WebDynpro ABAP, Flash Island, Adobe Interactive Form and ABAP. My colleagues consider me one of the top reference for ABAP, ABAP OO, WebDynpro ABAP and high tech topic. I'm owner of the SCN Community Projects on SAP Code Exchange: abap2xlsx, augmentedSAP, abap2GApps, abap2docx and Clone Hunter. Follow me on Twitter @IvanFemia

Join the Conversation

1 Comment

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: