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

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: