Skip to Content

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 🙂

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

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 🙂

To report this post you need to login first.

6 Comments

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

  1. Amit Nalawade

    Hi ,

    We were successfull in creating desktop app project and run it on localhost.

    we want to create mobile app project ,how can we go about this .

    Also desktop app that we created , will run only on my local server ? what if i want to run the same on device browser/ any other local server .

    Thanks ,

    Amit Nalawade .

    (0) 
  2. Amit Nalawade

    Hello ,

    We are using sap ui5 to build apps consuming gateway services and static data , only for mobile.

    Can we have a split view kind of feature using ui5 ? like the one we have on iPad for many apps .list on the left being the master part and details on the right making master detail combination .

    Thanks .

    (0) 
    1. Sateesh Kanala

      Hi,

      Please post the code on how you have connected from SAPUI5 mobile to SAP NW Gateway service and display the data in List.

      Regards

      Sateesh

      (0) 

Leave a Reply