AEM Forms ha introducido plantillas dinámicas. Puede utilizar el editor de plantillas de AEM Sites para crear o editar plantillas dinámicas. Las plantillas mencionadas en el siguiente artículo son plantillas estáticas. No están disponibles en una instalación predeterminada. Instale el paquete de compatibilidad para obtener estas plantillas en su entorno.
Comprender la Plantilla de la página de AEM y la creación de formularios adaptables
Comprender las Bibliotecas de cliente de AEM
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.
AEM QuickStart proporciona las siguientes plantillas de formulario adaptables:
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 |
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:
Para obtener más información, consulte Editor de plantillas.
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.
Navegue hasta CRXDE Lite de la instancia de autor.
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.
Navegue hasta la carpeta /libs/fd/af/templates.
Copie el nodo simpleEnrollmentTemplate
.
Navegue hasta la carpeta /apps/mycompany/templates. Haga clic con el botón derecho y seleccione Pegar.
Si es necesario, cambie el nombre del nodo de plantilla que ha copiado. Por ejemplo, cambie el nombre a enrollment-template.
Navegue hasta la ubicación /apps/mycompany/templates/enrollment-template.
Modifique las propiedades jcr:title
y jcr:description
del nodo jcr:content
para distinguir la plantilla de la plantilla copiada.
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
.
Navegue hasta la ubicación /apps/mycompany/templates/enrollment-template/jcr:content.
Abra la pestaña Propiedades y cambie el valor de la propiedad cq:designPath
a /etc/designs/mycompany.
Ahora cree un nodo /etc/designs/mycompany para el tipo cq:Page
.
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.
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
Copie el nodo /libs/fd/af/components/page/base en la carpeta /apps/mycompany/components/page.
Cambie el nombre del componente copiado a enrollmentpage
.
(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.
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
.
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
.
Incluya todos los scripts en el archivo head.jsp
para el componente contentpage
al archivo head.jsp
para el componenteenrollmentpage
.
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.
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:
guide.theme.simpleEnrollment
con la personalizada.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.