Angebot anfordern
Preisliste herunterladen
Beratungsgespräch vereinbaren
Christopher Uhrig
 - 27. Januar 2018

Google Places API in Lightning Components

Google Places Autocomplete

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.

 Google Places API in Lightning

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:

  1. 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.
  2. 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.
  3. 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.

Google Places API Call

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.

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.

get address details

Die erhaltene HTTP-Response wird im letzten Schritt zerlegt und in die entsprechenden Adressfelder gefüllt.

Den vollständigen Beispiel-Code finden Sie hier:
https://mind-force.de/files/2018/01/mindsquare_google__lightning.zip

Sie haben Fragen oder benötigen Unterstützung bei der Umsetzung eines Salesforce-Projekts?

Zögern Sie nicht mich zu kontaktieren, ich freue mich auf Ihre Nachricht.

 

Christopher Uhrig

Seit Jahren beschäftige ich mich täglich mit den Themen Usability und User Experience. Profitieren Sie von meinen Erfahrungen und lassen Sie uns gemeinsam Ihr Projekt erfolgreich realisieren!

Sie haben Fragen? Kontaktieren Sie mich!





Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.