Desarrollo de Forms (IU clásica)

La estructura básica de un formulario es:

  • inicio de formulario
  • Elementos de formulario
  • Fin del formulario

Todo esto se realiza con una serie de componentes deformulario predeterminados, disponibles en una instalación de AEM estándar.

Además de desarrollar nuevos componentes para su uso en los formularios, también puede:

Uso de secuencias de comandos para ampliar la funcionalidad cuando sea necesario.

Nota

Este documento se centra en el desarrollo de formularios mediante los componentes básicos en la IU clásica. Adobe recomienda aprovechar los nuevos componentes principales y ocultar condiciones para el desarrollo de formularios en la IU táctil.

Precargar valores de formulario

El componente inicio de formulario proporciona un campo para la ruta de carga, una ruta opcional que apunta a un nodo del repositorio.

Ruta de carga es la ruta a las propiedades del nodo que se utiliza para cargar valores predefinidos en varios campos del formulario.

Se trata de un campo opcional que especifica la ruta a un nodo en el repositorio. Cuando este nodo cuenta con propiedades que coinciden con los nombres de campo, los campos apropiados del formulario se cargan previamente con el valor de estas propiedades. Si no existe coincidencia, el campo contiene el valor predeterminado.

Nota

Una acción de formulario también puede establecer el recurso desde el que se cargarán los valores iniciales. Esto se hace usando FormsHelper#setFormLoadResource el interior init.jsp.

Sólo si no se ha establecido, el autor rellenará el formulario desde la ruta definida en el componente de formulario de inicio.

Preloading Form Fields with Multiple Values

Varios campos de formulario también tienen la ruta de carga de elementos, otra vez una ruta opcional que apunta a un nodo del repositorio.

Ruta de carga de elementos es la ruta a las propiedades de nodo que se utiliza para cargar valores predefinidos en ese campo específico del formulario, por ejemplo, una lista desplegable, un grupo de casillas de verificación o un grupo deradio.

Ejemplo: Precarga de una Lista desplegable con varios valores

Se puede configurar una lista desplegable con el rango de valores para la selección.

La ruta de carga de elementos se puede utilizar para acceder a una lista desde una carpeta del repositorio y precargarla en el campo:

  1. Create a new sling folder ( sling:Folder)

    for example, /etc/designs/<myDesign>/formlistvalues

  2. Añada una nueva propiedad (por ejemplo, myList) de tipo cadena de varios valores ( String[]) para que contenga la lista de elementos desplegables. El contenido también se puede importar mediante una secuencia de comandos, como con una secuencia de comandos JSP o cURL en una secuencia de comandos de shell.

  3. Utilice la ruta completa en el campo Ruta de carga de elementos:

    for example, /etc/designs/geometrixx/formlistvalues/myList

Tenga en cuenta que si los valores de la String[] son del tipo de formato:

  • AL=Alabama
  • AK=Alaska
  • etc.

AEM generará la lista como:

  • <option value="AL">Alabama</option>
  • <option value="AK">Alaska</option>

Esta función puede, por ejemplo, utilizarse bien en un ajuste de varios idiomas.

Desarrollo de sus propias acciones de formulario

Un formulario necesita una acción. Una acción define la operación que se ejecuta cuando el formulario se envía con los datos del usuario.

Se proporciona una serie de acciones con una instalación AEM estándar, que se pueden ver en:

/libs/foundation/components/form/actions

y en la lista Tipo de acción del componente Formulario :

chlimage_1-226

Esta sección trata cómo desarrollar su propia acción de formulario para incluirla en esta lista.

Puede agregar su propia acción en /apps :

  1. Cree un nodo de tipo sling:Folder. Especifique un nombre que refleje la acción que se va a implementar.

    Por ejemplo:

    /apps/myProject/components/customFormAction

  2. En este nodo, defina las siguientes propiedades y, a continuación, haga clic en Guardar todo para mantener los cambios:

    • sling:resourceType - configurado como foundation/components/form/action

    • componentGroup - definir como .hidden

    • De forma opcional:

      • jcr:title - especifique un título de su elección, esto se mostrará en la lista de selección desplegable. Si no se establece, se muestra el nombre del nodo
      • jcr:description - escriba una descripción de su elección
  3. En la carpeta, cree un nodo de cuadro de diálogo:

    1. Añada los campos para que el autor pueda editar el cuadro de diálogo de formularios una vez seleccionada la acción.
  4. En la carpeta, cree una de las opciones siguientes:

    1. Un script de anuncio.

      El nombre de la secuencia de comandos es post.POST.<extension>, por ejemplo: post.POST.jsp

      La secuencia de comandos posterior se invoca cuando se envía un formulario para procesarlo, contiene el código que controla los datos que llegan desde el formulario POST.

    2. Añada una secuencia de comandos hacia delante que se invoque al enviar el formulario.

      El nombre de la secuencia de comandos es forward.<extension>, por ejemplo: forward.jsp

      Esta secuencia de comandos puede definir una ruta. La solicitud actual se reenvía a la ruta especificada.
      La llamada necesaria es FormsHelper#setForwardPath (2 variantes). Un caso típico es realizar alguna validación, o lógica, para encontrar la ruta de destinatario y luego avanzar a esa ruta, permitiendo que el servlet predeterminado del POST Sling haga el almacenamiento real en JCR.

    También puede haber otro servlet que realice el procesamiento real, en tal caso la acción del formulario y el forward.jsp solo actuaría como el código "pegado". Un ejemplo de esto es la acción de correo en /libs/foundation/components/form/actions/mail, que envía detalles <currentpath>.mail.htmldonde se encuentra un servlet de correo.

    Entonces:

    • a post.POST.jsp resulta útil para las operaciones pequeñas que se realizan plenamente mediante la propia acción
    • mientras que la forward.jsp es útil cuando sólo se requiere la delegación.

    El orden de ejecución de las secuencias de comandos es:

    • Al procesar el formulario ( GET):

      1. init.jsp
      2. para todas las restricciones de campo: clientvalidation.jsp
      3. validación del formularioRT: clientvalidation.jsp
      4. el formulario se carga mediante el recurso de carga si se configura
      5. addfields.jsp mientras se procesa dentro de la representación <form></form>
    • al administrar un formulario POST:

      1. init.jsp
      2. para todas las restricciones de campo: servervalidation.jsp
      3. validación del formularioRT: servervalidation.jsp
      4. forward.jsp
      5. si se ha establecido una ruta de avance ( FormsHelper.setForwardPath), reenvíe la solicitud y, a continuación, llame a cleanup.jsp
      6. si no se configuró ninguna ruta de avance, llame post.POST.jsp (termina aquí, sin cleanup.jsp llamar)
  5. De nuevo en la carpeta, agregue de forma opcional:

    1. Secuencia de comandos para agregar campos.

      El nombre de la secuencia de comandos es addfields.<extension>, por ejemplo: addfields.jsp

      Se invoca una secuencia de comandos addfields inmediatamente después de escribir el HTML para el inicio de formulario. Esto permite que la acción agregue campos de entrada personalizados u otro código HTML dentro del formulario.

    2. Una secuencia de comandos de inicialización.

      El nombre de la secuencia de comandos es init.<extension>, por ejemplo: init.jsp

      Esta secuencia de comandos se invoca cuando se procesa el formulario. Se puede utilizar para inicializar detalles específicos de acciones. ``

    3. Un script de limpieza.

      El nombre de la secuencia de comandos es cleanup.<extension>, por ejemplo: cleanup.jsp

      Esta secuencia de comandos se puede utilizar para realizar la limpieza.

  6. Utilice el componente Forms en un parsys. La lista desplegable Tipo de acción ahora incluirá la nueva acción.

    Nota

    Para ver las acciones predeterminadas que forman parte del producto:

    /libs/foundation/components/form/actions

Desarrollo de sus propias restricciones de formulario

Las restricciones pueden imponerse en dos niveles:

Restricciones para campos individuales

Puede agregar sus propias restricciones para un campo individual (debajo /apps) de la siguiente manera:

  1. Cree un nodo de tipo sling:Folder. Especifique un nombre que refleje la restricción que se va a implementar.

    Por ejemplo:

    /apps/myProject/components/customFormConstraint

  2. En este nodo, defina las siguientes propiedades y, a continuación, haga clic en Guardar todo para mantener los cambios:

    • sling:resourceType - configurado para foundation/components/form/constraint

    • constraintMessage - un mensaje personalizado que se mostrará si el campo no es válido, según la restricción, al enviar el formulario

    • De forma opcional:

      • jcr:title - especifique un título de su elección, esto se mostrará en la lista de selección. Si no se establece, se muestra el nombre del nodo
      • hint - información adicional, para el usuario, sobre cómo utilizar el campo
  3. Dentro de esta carpeta, puede necesitar las siguientes secuencias de comandos:

    • Una secuencia de comandos de validación de cliente:

      El nombre de la secuencia de comandos es clientvalidation.<extension>, por ejemplo: clientvalidation.jsp

      Esto se invoca cuando se procesa el campo de formulario. Se puede utilizar para crear javascript de cliente para validar el campo en el cliente.

    • Secuencia de comandos de validación del servidor:

      El nombre de la secuencia de comandos es servervalidation.<extension>, por ejemplo: servervalidation.jsp

      Esto se invoca cuando se envía el formulario. Se puede utilizar para validar el campo en el servidor después de enviarlo.

Nota

En:

/libs/foundation/components/form/constraints

Restricciones de formulario-globales

La validación global del formulario se especifica configurando un tipo de recurso en el componente de formulario de inicio ( validationRT). Por ejemplo:

apps/myProject/components/form/validation

A continuación, puede definir:

  • a clientvalidation.jsp - insertado después de las secuencias de comandos de validación del cliente del campo
  • y un servervalidation.jsp - también llamado después de las validaciones individuales del servidor de campo en un POST.

Showing and Hiding Form Components

Puede configurar el formulario para que muestre u oculte los componentes del formulario según el valor de otros campos del formulario.

Cambiar la visibilidad de un campo de formulario resulta útil cuando el campo es necesario sólo en condiciones concretas. Por ejemplo, en un formulario de recopilación de información, se pregunta al usuario si desea que la información del producto se le envíe por correo electrónico. Al seleccionar Sí, aparece el campo de texto para que el cliente pueda escribir su dirección de correo electrónico.

Use the Edit Show/Hide Rules dialog box to specify the conditions under which a form component is shown or hidden.

showhideeditor

Utilice los campos en la parte superior del cuadro de diálogo para especificar la siguiente información:

  • Si va a especificar condiciones para ocultar o mostrar el componente.
  • Si alguna o todas las condiciones deben ser verdaderas para mostrar u ocultar el componente.

Aparecen una o varias condiciones bajo estos campos. Una condición compara el valor de otro componente del formulario (en el mismo formulario) con un valor. Si el valor real del campo se ajusta a la condición, la condición evalúa en verdadero. Las condiciones incluyen la siguiente información:

  • Título del campo de formulario que se va a probar.
  • Operador.
  • Valor frente al que se comprar el valor del campo.

Por ejemplo, un componente Grupo de radio con el título Receive email notifications?* * contiene Yes y No botones de opción. A Text Field component with the title of Email Address uses the following condition so that it is visible if Yes is selected:

showhidecondición

En Javascript, las condiciones utilizan el valor de la propiedad Nombre del elemento para hacer referencia a campos. In the previous example, the Element Name property of the Radio Group component is contact. El siguiente código es el código Javascript equivalente para ese ejemplo:

((contact == "Yes"))

Para mostrar u ocultar un componente de formulario:

  1. Edite el componente de formulario específico.

  2. Seleccione Mostrar/Ocultar para abrir el cuadro de diálogo Editar reglas de Mostrar/Ocultar:

    • En la primera lista desplegable, seleccione Mostrar u Ocultar para especificar si las condiciones determinan si se muestra u oculta el componente.

    • En la lista desplegable al final de la línea superior, seleccione:

      • todo : si todas las condiciones deben ser verdaderas para mostrar u ocultar el componente
      • cualquiera : si solo una o varias condiciones deben ser verdaderas para mostrar u ocultar el componente
    • En la línea de condición (una se presenta como predeterminada), seleccione un componente, operador y, a continuación, especifique un valor.

    • Añada más condiciones si es necesario haciendo clic en Añadir condición.

    Por ejemplo:

    chlimage_1-227

  3. Click OK to save the definition.

  4. After you saved your definition, an Edit Rules link appears next to the Show / Hide option in the form component properties. Click this link to open the Edit Show / Hide Rules dialog box to make changes.

    Click OK to save all changes.

    chlimage_1-228

    PRECAUCIÓN

    Se pueden ver y probar los efectos de las definiciones Mostrar/Ocultar:

    • en el modo de Previsualización en el entorno de creación (se necesita volver a cargar la página al cambiar por primera vez a la previsualización)
    • en el entorno de publicación

Handling Broken Component References

Las condiciones de la función de mostrar y ocultar utilizan el valor de la propiedad Nombre de elemento para hacer referencia a otros componentes del formulario. La configuración Mostrar/Ocultar no es válida cuando cualquiera de las condiciones hace referencia a un componente que se elimina o cuya propiedad Nombre del elemento ha cambiado. Cuando se produce esta situación, se deben actualizar manualmente las condiciones o se producirá un error cuando se cargue el formulario.

Cuando la configuración Mostrar/Ocultar no es válida, la configuración se proporciona únicamente como código JavaScript. Edite el código para corregir los problemas. El código utilizará la propiedad Nombre de elemento utilizada originalmente para hacer referencia a los componentes.

Desarrollo de secuencias de comandos para su uso con Forms

Para obtener más información sobre los elementos de API que se pueden utilizar al escribir secuencias de comandos, consulte los javadocs relacionados con los formularios.

Esto se puede utilizar para acciones como llamar a un servicio antes de enviar el formulario y cancelar el servicio si se produce un error:

  • Definir el tipo de recurso de validación

  • Incluir una secuencia de comandos para validación:

    • En JSP, llame al servicio web y cree un objeto com.day.cq.wcm.foundation.forms.ValidationInfo que contenga sus mensajes de error. Si hay errores, los datos del formulario no se publicarán.

En esta página