Skip to Content

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.

Screen Shot 2012-10-13 at 4.02.51 PM.png

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.

Screen Shot 2012-10-13 at 4.33.29 PM.png

To report this post you need to login first.

4 Comments

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

  1. Hilco Broens

    Hi Ivan,

    Thank you for this very interesting post! I managed to get part 1 running (added also proxy for the URL and changed the bindRows since I am using 1.8.4).

    However, I cannot get part 2 to run correctly; the rowSelect event does not get fired, so nothing happens.

    In Chrome I see an Uncaught Error in sap-ui-core.js. It says:

    Uncaught Error: DOM element with ID ‘content’ not found in page, but application tries to insert content.

    Any clue what goes wrong? Do others experience the same?

    Thanks!

    Hilco

    (0) 
    1. Seyed Ismail

      Hi Hilco,

      I managed to get part 1 running (added also proxy for the URL and changed the bindRows since I am using 1.8.4).

      How to add proxy for the URL and change the bind Rows?

      (0) 
  2. Fata Morgana

    Hi Ivan,

    your sample works fine.How can I manage to show the booking details in a second view (instead of below the “all flights” table)? My problem is that the second view does not get the url.

    Thanks!

    (0) 

Leave a Reply