DocumentaciónAEM 6.4Guía de Forms

Crear una plantilla de formulario adaptable personalizada creating-a-custom-adaptive-form-template

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

Requisitos previos prerequisites

Plantillas de formularios adaptables adaptive-form-template

Una plantilla de formulario adaptable es una plantilla de la página de AEM especializada, con determinadas propiedades y estructura de contenido que se utiliza para crear el formulario adaptable. La plantilla tiene diseños, estilos y estructuras de contenido inicial básicas preconfigurados.

Una vez creado un formulario, los cambios realizados en la estructura de contenido de la plantilla original no se reflejarán en el formulario.

Plantillas de formulario adaptables predeterminadas default-adaptive-form-templates

AEM QuickStart proporciona las siguientes plantillas de formulario adaptables:

  • Básico: Permite crear un formulario adaptable multipestaña utilizando una presentación de pestañas a la izquierda, donde puede visitar las pestañas en cualquier orden aleatorio.
  • Básico con Acrobat Sign: Permite crear un formulario con varias fichas y un asistente. Utiliza un diseño de pestañas a la izquierda que permite visitar las pestañas en cualquier orden. Utiliza los servicios de Adobe Document Cloud Design para la firma y verificación.
  • Plantilla en blanco: permite crear un formulario sin encabezado, pie de página ni contenido inicial. Puede agregar componentes, como cuadros de texto, botones e imágenes. La plantilla en blanco permite crear un formulario que puede incrustar en páginas de AEM Sites.

Estas plantillas tienen la propiedad sling:resourceType establecida en el componente de página correspondiente. El componente de página procesa la página de CQ, que contiene el contenedor de formulario adaptable, que a su vez procesa el formulario adaptable.

La siguiente tabla enumera la asociación entre las plantillas y el componente de página:

Plantilla
Componente Página
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedenrollment

Crear una plantilla de formulario adaptable mediante el editor de plantillas creating-an-adaptive-form-template-using-template-editor

Puede especificar la estructura y el contenido inicial de un formulario adaptable mediante el Editor de plantillas. Por ejemplo, si quiere que todos los autores de formularios tengan ciertos cuadros de texto, botones de navegación y un botón de envío en un formulario de registro. Puede crear una plantilla que los autores puedan utilizar para crear un formulario coherente con otros formularios de registro. El Editor de plantillas de AEM le permite lo siguiente:

  • Agregar componentes de encabezado y pie de página de un formulario en la capa de estructura
  • Proporcionar el contenido inicial para el formulario.
  • Especificar una temática.
  • Especificar acciones como enviar, restablecer y navegar.

Para obtener más información, consulte Editor de plantillas.

Crear una plantilla de formulario adaptable a partir de CRXDE creating-an-adaptive-form-template-from-crxde

En lugar de utilizar las plantillas disponibles, puede crear una y utilizarla para crear formularios adaptables. Las plantillas personalizadas se basan en varios componentes de página que hacen referencia a contenedores de formularios adaptables y elementos de página, como el encabezado y el pie de página.

Puede crear estos componentes mediante el componente de página base para el sitio web. También puede ampliar el componente de página del formulario adaptable que utilizan las plantillas listas para usar.

Realice los siguientes pasos para crear una plantilla personalizada, como simpleEnrollmentTemplate.

  1. Navegue hasta CRXDE Lite de la instancia de autor.

  2. En el directorio /apps, cree la estructura de carpetas para la aplicación. Por ejemplo, si el nombre de la aplicación es mycompany, cree una carpeta con este nombre. Normalmente, la carpeta de la aplicación contendrá componentes, configuración, plantillas, src y directorios de instalación. Para este ejemplo, cree las carpetas de componentes, configuración y plantillas.

  3. Navegue hasta la carpeta /libs/fd/af/templates.

  4. Copie el nodo simpleEnrollmentTemplate.

  5. Navegue hasta la carpeta /apps/mycompany/templates. Haga clic con el botón derecho y seleccione Pegar.

  6. Si es necesario, cambie el nombre del nodo de plantilla que ha copiado. Por ejemplo, cambie el nombre a enrollment-template.

  7. Navegue hasta la ubicación /apps/mycompany/templates/enrollment-template.

  8. Modifique las propiedades jcr:title y jcr:description del nodo jcr:content para distinguir la plantilla de la plantilla copiada.

  9. El nodo jcr:content de la plantilla modificada contiene los componentes guideContainer y guideformtitle. guideContainer es el contenedor que contiene el formulario adaptable. El componente guideformtitle muestra el nombre de la aplicación, la descripción, etc.

    En lugar de guideformtitle, puede incluir un componente personalizado o el componenteparsys. Por ejemplo, quite guideformtitle y agregue un componente personalizado o el nodo de componente parsys. Asegúrese de que la propiedad sling:resourceType del componente hace referencia al componente y se define lo mismo en el archivo de la página component.jsp.

  10. Navegue hasta la ubicación /apps/mycompany/templates/enrollment-template/jcr:content.

  11. Abra la pestaña Propiedades y cambie el valor de la propiedad cq:designPath a /etc/designs/mycompany.

  12. Ahora cree un nodo /etc/designs/mycompany para el tipo cq:Page.

Crear un componente de página de formulario adaptable create-an-adaptive-form-page-component

La plantilla personalizada tiene el mismo estilo que la plantilla predeterminada porque hace referencia al componente de página /libs/fd/af/components/page/base. Puede encontrar la referencia del componente como la propiedad sling:resourceType definida en el nodo /apps/mycompany/templates/enrollment-template/jcr:content. Como base es un componente de producto principal, no modifique este componente.

  1. Navegue hasta el nodo /apps/mycompany/templates/enrollment-template/jcr:content y modifique el valor de la propiedad sling:resourceType a /apps/mycompany/components/page/enrollmentpage

  2. Copie el nodo /libs/fd/af/components/page/base en la carpeta /apps/mycompany/components/page.

  3. Cambie el nombre del componente copiado a enrollmentpage.

  4. (Solo si ya tiene una página de contenido) Realice los siguientes pasos (a-d), si ya tiene un componente contentpage para su sitio web. Si no tiene un componente contentpage para su sitio web, puede dejar la propiedad resourceSuperType para señalar a la página base de OOTB.

    1. Para el nodo enrollmentpage, establezca el valor de la propiedad sling:resourceSuperType a mycompany/components/page/contentpage. El componente contentpage es el componente de la página base del sitio. Otros componentes de página pueden ampliarlo. Quite los archivos del script en enrollmentpage, excepto head.jsp, content.jsp y library.jsp. El componente sling:resourceSuperType, que es contentpage en este caso, incluye todos esos scripts. Los encabezados, incluidas la barra de navegación y el pie de página, se heredan del componente contentpage.

    2. Abra el archivo head.jsp.

      El archivo JSP contiene la línea <cq.include script="library.jsp"/>.

      El archivo library.jsp contiene la biblioteca de clienteguide.theme.simpleEnrollment, que contiene el estilo del formulario adaptable.

      El componente de página enrollmentpage tiene un archivo exclusivo head.jsp que anula el archivo head.jsp del componentecontentpage.

    3. Incluya todos los scripts en el archivo head.jsp para el componente contentpageal archivo head.jsp para el componenteenrollmentpage.

    4. En el script content.jsp, puede agregar contenido de página adicional o referencias a otros componentes que se incluyen cuando se procesa una página. Por ejemplo, si agrega el componente personalizado applicationformheader, asegúrese de agregar la siguiente referencia al componente en el archivo JSP:

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      Del mismo modo, si agrega un componente parsys en la estructura del nodo de la plantilla, incluya también el componente personalizado.

Crear una biblioteca de cliente de formulario adaptable creating-an-adaptive-form-client-library

El archivo head.jsp del componente enrollmentpage para la nueva plantilla incluye una biblioteca de cliente guide.theme.simpleEnrollment. La plantilla predeterminada también utiliza esta biblioteca de cliente. Cambie el estilo en la plantilla nueva mediante uno de estos métodos:

  • Definir una temática personalizada y reemplazar la predeterminada guide.theme.simpleEnrollment con la personalizada.
  • Definir una nueva biblioteca de cliente en /etc/designs/mycompany. Incluir la biblioteca de cliente después de la entrada de la temática predeterminada en la página jsp. Incluir todos los estilos anulados y archivos JavaScript adicionales en esta biblioteca de cliente.
NOTE
La temática hace referencia a una biblioteca de cliente que se incluye en el componente de página que se utiliza para procesar un formulario adaptable. La biblioteca de cliente rige principalmente el aspecto de un formulario adaptable.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da