Uso de las API de geolocalización en Forms adaptable

Visite la página AEM Forms samples para ver un vínculo a una demostración en directo de esta capacidad.

En este artículo analizaremos el uso de la API de geolocalización de Google para rellenar los campos de un formulario adaptable. Este caso de uso se utiliza comúnmente cuando desea rellenar los campos de dirección actuales en un formulario.

Se siguieron los siguientes pasos para utilizar la API de geolocalización en Forms adaptable.

1. Obtenga clave de API de Google para utilizar la plataforma Google Maps. Puede obtener una clave de prueba que sea válida durante 1 año.

2. El fragmento de formulario adaptable se creó con campos para contener la dirección actual

3. Se invocó la API de geolocalización en el suceso click del objeto image del formulario adaptable

4. Los datos JSON devueltos por la llamada de API se analizaron y los valores de los campos del formulario adaptable se establecieron en consecuencia.

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;
            }
        }
    
  });
}

En la línea 1 utilizamos la API de geolocalización HTML para obtener la ubicación actual. Una vez obtenida la ubicación actual, pasamos la ubicación actual a la función showPosition.

En la función showPosition, se utiliza la API de Google para recuperar los detalles de dirección de la latitud y longitud dadas.

A continuación, se analiza el JSON devuelto por la API para establecer los campos del formulario adaptable.

Para obtener esta capacidad en su servidor, siga los siguientes pasos

• Instale e inicie el servidor de AEM Forms.

!![NOTE] Esta funcionalidad se probó en AEM Forms 6.3 y posterior

• Obtener clave de API de Google.
• Importe los recursos relacionados con este artículo en AEM.
• Abra el fragmento Formulario adaptable en modo de edición.
• Abra el editor de reglas para el componente Opción de imagen .
• Reemplace <your_api_key> por la clave de API de Google.
• Guarde los cambios.
• Obtener una vista previa del formulario.
• Haga clic en el icono "geolocalización".
• El formulario debe rellenarse con la ubicación actual.