Google API Autocomplete with SAPUI5

[Joseph_BERTHE]

Introduction

One of my client ask me to integrate Google API inside SAP UI5 to validate addresses. There is lot of blog post related this subject, then I decided to merge all those information into one extended UI control that anybody can reuse in their own project.

Description

Prerequisite

• Of course what you need before all is to get Google API Key for the Google Maps autocomplete


• Then be sure you can handle CORS issue by using
  
  
  
  • a proxy (for production purpose)
  
  
  • destination in SAP Cloud platform
  
  
  • CORS plug-in for Chrome or Firefox (development purpose)
  
  
  
  

How-To

• Create a project from a template provided by SAP Web IDE

• Create a folder named utils (the name is personal, you can use another one)

• Upload the SearchAddressInput.js from GitHub and put it inside utils folder

• In the manifest, add utils/SearchAddressInput.js as a new resources

• In the view controller, add references to the library : <my.project.namespace>.utils.SearchAddressInput

• Finaly add the object to the page

var oCtrl = new SearchAddressInput({

	GoogleAPI: "AIzaSyBFXRi1HKVSrjL_Qy932KyMWXr3-M1x4rU"

});



this.getView().byId("idMaPage").addContent(oCtrl);

CORS Issue

To avoid the CORS issue, you can use the property ProxyPattern to bypass this issue. In practice, you can put anything you want because I concatenate the ProxyPattern with the rest of the Google URL:

<ProxyPattern>/maps/api/place/autocomplete/json

Example:

• For SAP Web IDE
  
  
  
  • ProxyPattern = "/GoogleDestination"
  
  
  • Do not forget to modify your neo-app.json
  
  
  
  

Conclusion

All the code and the extention are available into Gihub :

• https://github.com/jbesap/ui5-SearchAddressInput

I will updated it as soon as I find new features for this.

Use it, clone it, extend it and ... enjoy 😉