Show Menu
TEMAS×

Creación de una plantilla de formulario adaptable personalizada

Requisitos previos

Adaptive form template

Una plantilla de formulario adaptable es una plantilla de página de AEM especializada, con determinadas propiedades y estructura de contenido que se utiliza para crear un formulario adaptable. La plantilla tiene diseños, estilos y estructura de contenido inicial básica preconfigurados.
Una vez creado un formulario, los cambios realizados en la estructura de contenido de la plantilla original no se reflejan en el formulario.

Plantillas de formulario adaptables predeterminadas

AEM QuickStart proporciona las siguientes plantillas de formulario adaptables:
  • Básico: Permite crear un formulario adaptable con varias fichas con una presentación de fichas a la izquierda, donde puede visitar las fichas en cualquier orden aleatorio.
  • Básico con Adobe Sign: Permite crear un formulario con varias fichas y un asistente. Utiliza un diseño de fichas a la izquierda que permite visitar las fichas en cualquier orden. Utiliza los servicios de firma y verificación de Adobe Document Cloud.
  • 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 le permite crear un formulario que puede incrustar en las páginas del sitio de AEM.
Estas plantillas tienen la sling:resourceType propiedad establecida en el componente de página correspondiente. El componente de página procesa la página de CQ, que contiene el contenedor de formularios adaptables, que a su vez procesa el formulario adaptable.
La siguiente tabla enumera la asociación entre plantillas y componentes de página:
Plantilla
Componente de página
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnregistrationTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnregistrationTemplate
/libs/fd/af/components/page/tabbedenregistration
/libs/fd/afaddon/templates/advancedEnregistrationTemplate
/libs/fd/afaddon/components/page/Advancedenregistration

Creación de una plantilla de formulario adaptable mediante el editor de plantillas

Puede especificar la estructura y el contenido inicial de un formulario adaptable mediante el Editor de plantillas. Por ejemplo, desea que todos los autores de formularios tengan pocos cuadros de texto, botones de navegación y un botón de envío en un formulario de inscripción. Puede crear una plantilla que los autores puedan utilizar para crear un formulario coherente con otros formularios de inscripción. El Editor de plantillas de AEM le permite:
  • Adición de componentes de encabezado y pie de página de un formulario en la capa de estructura
  • Proporcione el contenido inicial del formulario.
  • Especifique un tema.
  • Especifique acciones como enviar, restablecer y desplazarse.
Para obtener más información, consulte Editor de plantillas .

Creación de una plantilla de formulario adaptable a partir de CRXDE

En lugar de utilizar las plantillas disponibles, puede crear una plantilla 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 con el componente de página base del sitio Web. También puede ampliar el componente de página del formulario adaptable que utilizan las plantillas integradas.
Realice los siguientes pasos para crear una plantilla personalizada, como simpleEnregistrationTemplate.
  1. Vaya a CRXDE Lite en la instancia de creación.
  2. En el directorio /apps, cree la estructura de carpetas para la aplicación. Por ejemplo, si el nombre de la aplicación es miempresa, cree una carpeta con este nombre. Normalmente, la carpeta de la aplicación contiene componentes, configuración, plantillas, src y directorios de instalación. Para este ejemplo, cree las carpetas de componentes, configuración y plantillas.
  3. Vaya a la carpeta /libs/fd/af/templates.
  4. Copie el simpleEnrollmentTemplate nodo.
  5. Vaya a la carpeta /apps/miempresa/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 su nombre como plantilla de inscripción.
  7. Vaya a la ubicación /apps/miempresa/templates/enregistration-template.
  8. Modifique las propiedades jcr:title y jcr:description del jcr:content nodo para distinguir la plantilla de la plantilla copiada.
  9. El jcr:content nodo de la plantilla modificada contiene los guideContainer componentes y guideformtitle . guideContainer es el contenedor que contiene el formulario adaptable. El guideformtitle componente muestra el nombre de la aplicación, la descripción, etc.
    En lugar de guideformtitle , puede incluir un componente personalizado o el parsys componente. Por ejemplo, elimine guideformtitle y agregue un componente personalizado o el nodo del parsys componente. Asegúrese de que la sling:resourceType propiedad del componente hace referencia al componente y que lo mismo se define en el archivo de página component.jsp .
  10. Vaya a la ubicación /apps/miempresa/templates/enregistration-template/jcr:content.
  11. Abra la ficha Propiedades y cambie el valor de la cq:designPath propiedad a /etc/designs/miempresa.
  12. Ahora cree un nodo /etc/designs/miempresa para el cq:Page tipo.

Creación de un componente de página de formulario adaptable

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/miempresa/templates/enregistration-template/jcr:content. Dado que base es un componente de producto principal, no modifique este componente.
  1. Vaya al nodo /apps/miempresa/templates/enplication-template/jcr:content y modifique el valor de la propiedad sling:resourceType en /apps/miempresa/components/page/enrollmentpage
  2. Copie el nodo /libs/fd/af/components/page/base en la carpeta /apps/miempresa/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 contentpage componente existente para el sitio Web. Si no tiene un contentpage componente existente para el sitio web, puede dejar la resourceSuperType propiedad para que apunte a la página base de OOTB.
    1. Para el enrollmentpage nodo, establezca el valor de la propiedad sling:resourceSuperType en mycompany/components/page/contentpage. El contentpage componente es el componente de página base del sitio. Otros componentes de página pueden ampliarla. Elimine los archivos de secuencias de comandos debajo enrollmentpage , excepto head.jsp , content.jsp y library.jsp . El sling:resourceSuperType componente, que es contentpage en este caso, incluye todas estas secuencias de comandos. Los encabezados, incluidas la barra de navegación y el pie de página, se heredan del contentpage componente.
    2. Abra el archivo head.jsp .
      El archivo JSP contiene la línea <cq.include script="library.jsp"/> .
      El library.jsp archivo contiene la biblioteca del guide.theme.simpleEnrollment cliente, que contiene el estilo del formulario adaptable.
      El componente de página enrollmentpage tiene un head.jsp archivo exclusivo que anula el head.jsp archivo del contentpage componente.
    3. Incluya todas las secuencias de comandos del head.jsp archivo del contentpage componente en el head.jsp archivo del enrollmentpage componente.
    4. En la secuencia de comandos, puede agregar contenido de página adicional o referencias a otros componentes que se incluyen cuando se procesa una página. content.jsp 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 parsys componente en la estructura del nodo de plantilla, incluya también el componente personalizado.

Creación de una biblioteca de cliente de formulario adaptable

El head.jsp archivo del enrollmentpage componente 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 nueva plantilla mediante uno de estos métodos:
  • Defina un tema personalizado y reemplace el tema predeterminado guide.theme.simpleEnrollment por el tema personalizado.
  • Defina una nueva biblioteca de cliente en /etc/designs/miempresa. Incluya la biblioteca de cliente después de la entrada de tema predeterminada en la página jsp. Incluya todos los estilos anulados y los archivos de Java Script adicionales en esta biblioteca de cliente.
El tema hace referencia a una biblioteca de cliente que se incluye en el componente de página utilizado para procesar un formulario adaptable. La biblioteca de cliente rige principalmente el aspecto de un formulario adaptable.