This is the last part of my trilogy (YES, finally I have a trilogy like Batman, Star Wars and Marty McFly ???? ).

In part 1 and part 2 we saw how to consume Gateway services using SAPUI5 library, in this part I would like to focus on the advantage of using SAPUI5 combined with external javascript libraries.

We created an awesome UI using very few lines of HTML and Javascript, I repeat only HTML + JS…

So what does it mean? That we are absolutely free to change and customize our project also with external JS libraries for example.

This is the main advantage of SAPUI5!

So why not use the Google Maps API? We can display the flight trip in a maps inside our application.

Would it be simple?

Just a quick read to Google Direction Rendering documentation and we notice that it looks too simple ????


First of all we need to import Google libraries in our project editing the head section of index.html file


Function initialize just prepare our application to use GMaps library and identify the HTML block-content element with id “map-canvas” as container of the maps.

function initialize() {                     directionsDisplay = new google.maps.DirectionsRenderer();                     var latlng = new google.maps.LatLng(-34.397, 150.644);                     var myOptions = {                               zoom : 15,                               center : latlng,                               mapTypeId : google.maps.MapTypeId.ROADMAP                     }                     map = new google.maps.Map($('#map_canvas').get(0), myOptions);                     directionsDisplay.setMap(map);           }

Function calcRoute will be used to automatically change the maps based on the flight selected

function calcRoute(departureCity,destinationCity) {                       var request = {                         origin:departureCity,                         destination:destinationCity,                         travelMode: google.maps.TravelMode.DRIVING                       };                       directionsService.route(request, function(result, status) {                         if (status == google.maps.DirectionsStatus.OK) {                           directionsDisplay.setDirections(result);                         }                       });           }

index.html file is ready now let’s add some changes on our view file


First of all we need to create a Panel in our layout and the map_canvas HTML block element

var rTitle = new sap.ui.commons.Title('rTitle');             rTitle.setText('All - Flights');             rPannel.setTitle(rTitle);   // GMaps start               var mapPannel = new sap.ui.commons.Panel('mapPanel');           mapPannel.addContent(new sap.ui.core.HTML(                                                   {                                                             content : "
"                                                   }));         var mTitle = new sap.ui.commons.Title('mTitle');           mTitle.setText("Fligth Map");           mapPannel.setTitle(mTitle); // GMaps end  var oTable = new sap.ui.table.DataTable();

In this example the maps will be refreshed each time a new flight will be selected, so in event “rowSelect” code we add few lines of code that retrieve the departure and destination city of the selected flight and invoke the method calcRoute added in the previous step.

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); // GMaps start      var oFlightDetails = oModel.getProperty("FlightDetails", currentRowContext);      oFlightDetails['DepartureCity'];      oFlightDetails['DestinationCity'];      mTitle = mapPannel.getTitle();      mTitle.setText("From " + oFlightDetails['DepartureCity'] + " To " + oFlightDetails['DestinationCity']);        mapPannel.setTitle(mTitle);      initialize();      calcRoute(oFlightDetails['DepartureCity'],oFlightDetails['DestinationCity']); // GMaps end });

Final change, attach the map Panel to the main layout

rPannel.addContent(oTable);  layout.createRow(rPannel); // GMap start layout.createRow(mapPannel); // GMap end this.addContent(layout);

Deploy and Execute

Now deploy on your HTTP Server and enjoy! Live demo is available here.

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

New NetWeaver Information at

Very Helpfull

User Rating: Be the first one !