Google Maps and OData Mashup on SAP Cloud Portal

Moderator’s note:

Note that our public GitHub repository, providing code samples for Cloud Portal on the Neo environment, is not available anymore. If you have further questions, contact us under sapportal@sap.com.

With the SAP Cloud Platform its pretty straight forward to build applications and enhance their capabilities through integration with SAP and 3rd party solution and systems. With the SAP Cloud Portal customers can create great looking access points that bring all these applications together into one comprehensive business solution.

In this blog we will create two Portal widgets:

• Google Maps widget – displaying a selected location on a Google map.
• Customer Contacts widget – a list of customers retrieved from the Northwind public OData service.

The widgets are two separate SAPUI5 apps that communicate with each other, so when an end user selects a customer from the Customer Contacts widget – his address location is displayed on the Google Map widget.

This is done using the SAPUI5 Eventbus API. The API provides eventing capabilities for applications like firing events and attaching or detaching event handlers for events which are notified when events are fired. 

Getting Started

The SAP Cloud Portal samples are available in our sample GitHub repository. To get started with this exercise

1. Get the source code – follow the steps described here under Download and Installation to
   –  Download the repository
   –  Upload the two widgets available under this folder to your SAP Web IDE
   –  Deploy the widgets to your SAP Cloud Platform account.
2. Create a Portal site – to create a new multi-page portal site, follow the steps described here. To create a content-rich portal site, with a Launchpad page, Fiori apps, and ABAP WD app – follow this 9-step portal mission.
3. In a Portal page add the 2 widgets

• Click on the + icon in one of the site pages sections to open the widget gallery
  
• Search and select the Customer Contacts and Google Map widgets to add them to the page
  
• Once the widgets are added you can design their appearance on the page using the section settings editor
  
• Notice that if you configured the northwind destination properly – you should be able to see the list of customers in the Customer Contacts widget
  
• Click on the Customer Contact widget to open the widget settings and set the widget height
  
• Click on the Google Map widget to open the widget settings.
• Enter the Google API key and click on Submit Key – notice that the map is loaded in the widget.Click OK to apply the changes
  
• You can go ahead and change additional widget settings – In the Google Map Configuration settings you can search for a different location to display, change the map zoom level, and set the widget height
  
• Now that widgets are set on the portal site page you can publish the site and view the its runtime.
  

Code Sample Notes

Some words about the code used to implement these widgets.

1. Widget Settings – the Customer Contact list includes the default key-value widget settings UI. The Google Map widget has a custom widget settings UI for an extended configuration scenario. Read here for more information about the widget settings and the supported APIs.
2. The Google Map script is loaded once with the API Key provided by the Portal admin

   jQuery.sap.includeScript(
   	"https://maps.googleapis.com/maps/api/js?key="+apiKey,
   	this.failGoogleMapLoad.bind(this),
   	this.successGoogleMapLoad.bind(this)
   );​

3. The Google Map widget subscribes to two site events – one of them provides the longitude and latitude of the location to display and the other searches the address using the Google Destination APIs to find the searched address coordinates.

   subscribeToSiteEvent: function() {
   	var eventBus = sap.ui.getCore().getEventBus();
   	eventBus.subscribe("google.maps", "location-change", this.handleLocationChange.bind(this), this);
   	eventBus.subscribe("google.maps", "location-search-and-change", 
                                       this.handleLocationSearchAndChange.bind(this), this);
   },​

4. In the Custom Contacts widget – selecting a Customer list item publishes the event on the EventBus – providing the customer address as the search term.

   onListItemPress: function (evt) {
   	var source = evt.getSource();
   	var selectedObj = source._getBindingContext().getObject();
   	var address = selectedObj.Address + " " + selectedObj.City + " " + selectedObj.PostalCode + " " + selectedObj.Country;
   	
   	var eventBus = sap.ui.getCore().getEventBus();
   	eventBus.publish("google.maps", "location-search-and-change", {address: address});
   },​