Utiliser les API Geolocation dans les formulaires adaptatifs using-geolocation-api-s-in-adaptive-forms
Dans cet article, nous allons utiliser l’API Geolocation de Google pour renseigner les champs d’un formulaire adaptatif. Ce cas d’utilisation s’adresse aux personnes qui souhaitent remplir les champs de l’adresse actuelle d’un formulaire.
Pour utiliser l’API Geolocation dans les formulaires adaptatifs, procédez comme suit.
-
Obtenez la clé d’API auprès de Google pour utiliser la plateforme Google Maps. Vous pouvez obtenir une clé d’évaluation, valable 1 an.
-
Un fragment de formulaire adaptatif a été créé et comporte des champs relatifs à l’adresse actuelle.
-
L’API Geolocation a été appelée lors de l’événement de clic sur l’objet image du formulaire adaptatif.
-
Les données JSON renvoyées par l’appel API ont été analysées et les valeurs des champs de formulaire adaptatif ont été définies en conséquence.
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position)
{
console.log(" I am inside the showPosition in fragment");
console.log("Latitude: " + position.coords.latitude + "Longitude " + position.coords.longitude);
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude+"&key=<your_api_key>";
console.log(url);
$.getJSON(url,function (data, textStatus){
var location=data.results[0].formatted_address;
console.log(location);
for(i=0;i<data.results[0].address_components.length;i++)
{
if(data.results[0].address_components[i].types[0] == "street_number")
{
streetNumber.value = data.results[0].address_components[i].long_name;
}
if(data.results[0].address_components[i].types[0] == "route")
{
streetName.value = data.results[0].address_components[i].long_name;
}
if(data.results[0].address_components[i].types[0] == "postal_code")
{
zipCode.value = data.results[0].address_components[i].long_name;
}
if(data.results[0].address_components[i].types[0] == "locality")
{
city.value = data.results[0].address_components[i].long_name;
}
if(data.results[0].address_components[i].types[0] == "administrative_area_level_1")
{
state.value = data.results[0].address_components[i].long_name;
}
}
});
}
Dans la ligne 1, l’API Geolocation HTML permet d’obtenir la position actuelle. Une fois l’emplacement actuel obtenu, l’emplacement actuel est transmis à la fonction showPosition.
Dans la fonction showPosition, l’API Google permet de récupérer les détails de l’adresse pour la latitude et la longitude données.
Le code JSON renvoyé par l’API est ensuite analysé pour définir les champs de formulaire adaptatif.
Pour activer cette fonctionnalité sur votre serveur, procédez comme suit :
- Installez et démarrez le serveur AEM Forms.
Cette fonctionnalité a été testée sur AEM Forms 6.3 et versions ultérieures.
- Obtenez la clé d’API Google.
- Importez dans AEM les ressources présentées dans cet article.
- Ouvrez le fragment de formulaire adaptatif en mode d’édition.
- Ouvrez l’éditeur de règles pour le composant Choix d’image.
- Remplacez <your_api_key> par la clé d’API Google.
- Enregistrez vos modifications.
- Prévisualisez le formulaire.
- Cliquez sur l’icône « geolocation ».
- Votre emplacement actuel est à présent renseigné dans le formulaire.