Consume NetWeaver Gateway services via SAPUI5 – Part 3

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 🙂

index.html

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Begin GMaps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
          var geocoder;
          var directionsDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;
          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(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);
                        }
                      });
          }
</script>
<!-- End GMaps -->
<script src="./resources/sap-ui-core.js" type="text/javascript"
  id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"
  data-sap-ui-theme="sap_goldreflection">
</script>

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

retrieveFlight.view.js

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 : "<div id='map_canvas' style='width: 100%; height: 400px;'></div>"
                                                  }));
        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 🙂