Envío asincrónico de formularios adaptables asynchronous-submission-of-adaptive-forms
Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principalespara crear un nuevo formulario adaptableo añadir formularios adaptables a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de formularios adaptables, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Formularios adaptables con componentes de base.
Tradicionalmente, los formularios web se configuran para enviarse sincrónicamente. En el envío sincrónico, cuando los usuarios envían un formulario, se les redirige a una página de reconocimiento, de agradecimiento o, si hay un error en el envío, a una página de error. Sin embargo, las experiencias web modernas, como las aplicaciones de una sola página, están ganando popularidad en los casos en los que la página web permanece estática mientras la interacción cliente-servidor se produce en segundo plano. Ahora puede proporcionar esta experiencia con formularios adaptables mediante la configuración del envío asincrónico.
En el caso del envío asincrónico, cuando un usuario envía un formulario, el desarrollador del formulario agrega una experiencia independiente, como redirigir a otro formulario o a una sección independiente del sitio web. El autor también puede añadir servicios independientes, como enviar datos a un almacén de datos diferente o añadir un motor de análisis personalizado. Si hay envío asincrónico, un formulario adaptable se comporta como una aplicación de una sola página, ya que el formulario no se vuelve a cargar o su URL no cambia cuando los datos del formulario enviados se validan en el servidor.
Siga leyendo para obtener más información sobre el envío asincrónico en formularios adaptables.
Configuración del envío asincrónico configure
Para configurar el envío asincrónico en un formulario adaptable haga lo siguiente:
-
En el modo Autor del formulario adaptable, seleccione el objeto Contenedor de formulario y seleccione
-
En la sección de propiedades de Envío, habilite Usar envío asincrónico.
-
En la sección Al enviar, seleccione una de las siguientes opciones para realizarla cuando se envíe correctamente del formulario.
- Redirigir a URL: redirige a la URL o página especificada después de enviar el formulario. Puede especificar una URL o examinar y elegir la ruta a una página en el campo URL/ruta de redireccionamiento.
- Mostrar mensaje: muestra un mensaje sobre el envío del formulario. Puede escribir un mensaje en el campo de texto debajo de la opción Mostrar mensaje. El campo de texto admite el formato de texto enriquecido.
-
Seleccione
Funcionamiento del envío asincrónico how-asynchronous-submission-works
AEM Forms proporciona controladores de éxito y de error predeterminados para los envíos de formularios. Los controladores son funciones del lado del cliente que se ejecutan en función de la respuesta del servidor. Cuando se envía un formulario, los datos se transmiten al servidor para su validación, lo que devuelve una respuesta al cliente con información sobre el evento de éxito o error del envío. La información se pasa en forma de parámetros al controlador correspondiente para ejecutar la función.
Además, los autores y desarrolladores de formularios pueden escribir reglas a nivel de formulario para invalidar los controladores predeterminados. Para obtener más información, consulte Invalidar los controladores predeterminados mediante reglas.
Primero vamos a revisar la respuesta del servidor para los eventos de éxito y de error.
Respuesta del servidor para el evento de éxito del envío server-response-for-submission-success-event
La estructura de la respuesta del servidor para el evento de éxito del envío es la siguiente:
{
contentType : "<xmlschema or jsonschema>",
data : "<dataXML or dataJson>" ,
thankYouOption : <page/message>,
thankYouContent : "<thank you page url/thank you message>"
}
La respuesta del servidor si el envío de formularios se realiza correctamente incluye lo siguiente:
- el tipo de formato de datos del formulario: XML o JSON;
- los datos del formulario en formato XML o JSON;
- la opción seleccionada para redireccionar a una página o mostrar un mensaje como se ha configurado en el formulario;
- la URL de la página o contenido del mensaje, según la configuración del formulario.
El controlador de éxito lee la respuesta del servidor y, en consecuencia, redirige a la URL de la página configurada o muestra un mensaje.
Respuesta del servidor para el evento de error del envío server-response-for-submission-error-event
La estructura de la respuesta del servidor para el evento de error del envío es la siguiente:
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
La respuesta del servidor si hay un error en el envío del formulario incluye:
- el motivo del error, el error de CAPTCHA o la validación del lado del servidor;
- la lista de objetos de error, que incluye la expresión SOM del campo en el que se ha producido un error al efectuar la validación y el mensaje de error correspondiente.
El controlador de error lee la respuesta del servidor y, en consecuencia, muestra el mensaje de error en el formulario.
Invalidar los controladores predeterminados mediante reglas custom
Los desarrolladores y autores de formularios pueden escribir reglas a nivel de formulario en el editor de código para invalidar los controladores predeterminados. La respuesta del servidor para eventos de éxito y error se expone a nivel de formulario, al cual los desarrolladores pueden acceder usando $event.data en las reglas.
Realice los siguientes pasos para escribir reglas en el editor de código para controlar los eventos de éxito y error.
- Abra el formulario adaptable en el modo Autor, seleccione cualquier objeto de formulario y seleccione
- Seleccione Formulario en el árbol Objetos de formulario y seleccione Crear.
- Seleccione Editor de código de la lista desplegable de modo de selección.
- En el editor de código, seleccione Editar código. Seleccione Editar en el cuadro de diálogo de confirmación.
- Elija Envío correcto o Error en el envío de la lista desplegable Evento.
- Escriba una regla para el evento seleccionado y seleccione Listo para guardar la regla.