27. Januar 2018

Google Places API in Lightning Components

Das Nutzen von externen Ressourcen ist innerhalb Lightning Components nicht immer einfach zu realisieren - speziell wenn es sich um komplexe Bibliotheken wie die Google Places API handelt.

In diesem Blogbeitrag möchte ich Ihnen zeigen, wie Sie mit Lightning Components und einem Apex-Controller eine Lookup-Komponente erstellen, welche das Suchen nach Adressen mit Hilfe der Google Places API ermöglicht. Darüber hinaus wird ein Autocomplete und ein Autofill realisiert, sodass die Daten bei Mausklick automatisiert in ein Formular eingetragen werden.

Preview: Google Places API in Lightning

Was Sie für die Google Places API benötigen

Bevor Sie beginnen, ist es nötig einen Google Places API Key zu beantragen, der es Ihnen erlaubt eigene Anwendungen mit Hilfe dieser Bibliothek zu schreiben. Einen solchen Key können Sie hier beantragen: https://developers.google.com/places/web-service/get-api-key

Clientseitig gibt es drei Methoden, die bei unterschiedlichen Ereignissen ausgelöst werden:

KeyUpHandler wird ausgelöst, sobald der User das dritte Zeichen innerhalb des Lookups eingibt. Da nach einem Zeichen die Wahrscheinlichkeit des richtigen Ergebnisses enorm gering ist und außerdem die Performance sinkt, wird dieses Event erst beim dritten Zeichen ausgelöst. Dabei wird serverseitig eine Anfrage an die Google Places API gestellt, die eine Vorschlagliste zurückliefert.
selectOptions wird ausgeführt, nachdem man eine Auswahl innerhalb der Vorschläge angeklickt hat. Hier erfolgt eine erneute serverseitige Anfrage an die Google Places API um Details zur ausgewählten Option zurückzuliefern.
clear feuert, sobald man die Eintrag mittels Klick auf das Kreuz-Icon (x) entfernt.

Ortsvorhersagen bei Tastendruck

Um die Ortsvorhersagen bei Tastendruck auszugeben wird der Place Autocomplete-Dienst per HTTP Request innerhalb des ApexControllers aufgerufen. Diese Anfrage liefert Vorschlage auf Basis der Benutzereingaben und der definierten Parameter zurück. Für tiefer gehende Informationen über die Google Places API werfen Sie bitte einen Blick auf https://developers.google.com/places/.

Die nun gelisteten Methoden befinden sich innerhalb des Apex-Controllers und fordern die Anfrage an die Google Place API an.
getAdressAutoComplete stellt die Anfrage an die Google Places API dar und ruft außerdem folgende Methoden auf:

getGoogleMapsAPIKey, welche schlichtweg den Google Maps API Key zurückgibt.
getHttp, welche für den HTTP-Request verantwortlich ist.

In der Methode getAdressAutoComplete wird der Suchstring als Parameter mitgeliefert und in das Format UTF-8 konvertiert. Darüber hinaus werden einige Parameter innerhalb der URL übermittelt, wie zum Beispiel der Google Maps API Key oder der gewünschte Ortstyp.

Webinar: So nutzen Sie Salesforce richtig und tippen nicht nur sinnlos Daten ein!

Salesforce ist bei Ihnen schon im Einsatz oder Sie überlegen, ob Salesforce das richtige CRM-System für Ihr Unternehmen ist? Sie sind sich aber nicht sicher, ob Salesforce mehr ist als nur ein Datenspeicher?

Abschließend wird die Anfrage mittels HTTP-Request ausgeführt und die HTTP-Response an den Client zurückgegeben. Dieser beinhaltet unter anderem eine eindeutige Orts-ID place_id.

Wählt der User nun einen Vorschlag per Mausklick aus, werden Details zu diesem Ort abgefragt, die in der vorherigen Response nicht vorhanden waren. Dazu wird die ermittelte place_id in einer erneuten Anfrage versandt.