O AEM Forms introduziu os modelos dinâmicos. Você pode usar o editor de modelos do AEM Sites para criar ou editar modelos dinâmicos. Os modelos mencionados no artigo abaixo são modelos estáticos. Eles não estão disponíveis em uma instalação padrão. Instalar pacote de compatibilidade para obter esses modelos no seu ambiente.
Compreensão do AEM Modelo da página e Criação de formulário adaptável
Compreensão do AEM Bibliotecas do cliente
Um modelo de formulário adaptável é um modelo de página AEM especializado, com determinadas propriedades e estrutura de conteúdo usada para criar o formulário adaptável. O modelo tem layouts, estilos e estrutura básica de conteúdo inicial pré-configurados.
Depois de criar um formulário, as alterações na estrutura do conteúdo do modelo original não serão refletidas no formulário.
O AEM QuickStart fornece os seguintes modelos de formulário adaptáveis:
Esses modelos têm o sling:resourceType
propriedade definida para o componente de página correspondente. O componente Página renderiza a página CQ, contendo o contêiner de formulário adaptável, que por sua vez renderiza o formulário adaptável.
A tabela a seguir enumera a associação entre os modelos e o componente de página:
Modelo |
Componente de 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/advanced/enrollment |
Você pode especificar a estrutura e o conteúdo inicial de um formulário adaptável usando o Editor de modelos. Por exemplo, você deseja que todos os autores de formulário tenham poucas caixas de texto, botões de navegação e um botão de envio em um formulário de inscrição. Você pode criar um modelo que os autores podem usar para criar um formulário consistente com outros formulários de inscrição. O Editor de modelo AEM permite:
Para obter mais informações, consulte Editor de modelo.
Em vez de usar os modelos disponíveis, você pode criar um modelo e usá-lo para criar formulários adaptáveis. Os modelos personalizados são baseados em vários componentes de página que fazem referência a contêineres de formulário adaptável e elementos de página, como cabeçalho e rodapé.
Você pode criar esses componentes usando o componente de página base para seu site. Como alternativa, é possível estender o componente de página do formulário adaptável que os modelos prontos para uso usam.
Execute as seguintes etapas para criar um modelo personalizado, como simpleEnrollmentTemplate.
Navegue até o CRXDE Lite na instância de criação.
No diretório /apps, crie a estrutura de pastas para o aplicativo. Por exemplo, se o nome do aplicativo for mycompany, crie uma pasta com esse nome. Normalmente, a pasta do aplicativo contém componentes, configuração, modelos, src e diretórios de instalação. Para este exemplo, crie as pastas de componentes, configuração e modelos.
Navegue até a pasta /libs/fd/af/templates.
Copie o simpleEnrollmentTemplate
nó.
Navegue até a pasta /apps/mycompany/templates. Clique com o botão direito do mouse e selecione Colar.
Se necessário, renomeie o nó do modelo copiado. Por exemplo, renomeie-o como enrollment-template.
Navegue até o local /apps/mycompany/templates/enrollment-template.
Modifique o jcr:title
e jcr:description
propriedades para o jcr:content
para distinguir o modelo do modelo copiado.
A variável jcr:content
o nó do modelo modificado contém o guideContainer
e guideformtitle
componentes. guideContainer
é o contêiner que contém o formulário adaptável. A variável guideformtitle
exibe o nome, a descrição e assim por diante do aplicativo.
Em vez de guideformtitle
, você pode incluir um componente personalizado ou a variável parsys
componente. Por exemplo, remover guideformtitle
e adicione um componente personalizado ou a variável parsys
nó do componente. Certifique-se de que o sling:resourceType
propriedade do componente faz referência ao componente, e a mesma é definida na página component.jsp
arquivo.
Navegue até o local /apps/mycompany/templates/enrollment-template/jcr:content.
Abra o Propriedades e altere o valor da variável cq:designPath
propriedade para /etc/designs/mycompany.
Agora crie um nó /etc/designs/mycompany para o cq:Page
tipo.
O modelo personalizado tem o mesmo estilo do modelo padrão, pois o modelo faz referência ao componente de página /libs/fd/af/components/page/base. Você pode encontrar a referência do componente como a propriedade sling:resourceType
definido no nó /apps/mycompany/templates/enrollment-template/jcr:content. Como a base é um componente principal do produto, não modifique esse componente.
Navegue até o nó /apps/mycompany/templates/enrollment-template/jcr:content e modifique o valor da propriedade sling:resourceType
para /apps/mycompany/components/page/enrollmentpage
Copie o nó /libs/fd/af/components/page/base para a pasta /apps/mycompany/components/page.
Renomear o componente copiado para enrollmentpage
.
(Somente se você já tiver uma página de conteúdo) Execute as seguintes etapas (a-d), se você tiver uma contentpage
para o seu site. Se você não tiver um contentpage
para o seu site, você pode deixar o resourceSuperType
para apontar para a página de base OOTB.
Para o enrollmentpage
nó, defina o valor da propriedade sling:resourceSuperType
para mycompany/components/page/contentpage. A variável contentpage
é o componente da página base do site. Outros componentes da página podem estendê-la. Remover arquivos de script em enrollmentpage
, exceto head.jsp
, content.jsp
, e library.jsp
. A variável sling:resourceSuperType
componente, que é contentpage
nesse caso, inclui todos esses scripts. Os cabeçalhos, incluindo a barra de navegação e o rodapé, são herdados da contentpage
componente.
Abra o arquivo head.jsp
.
O arquivo JSP contém a linha <cq.include script="library.jsp"/>
.
A variável library.jsp
o arquivo contém o guide.theme.simpleEnrollment
biblioteca cliente, que contém o estilo do formulário adaptável.
O componente da página enrollmentpage
tem um head.jsp
arquivo que substitui o head.jsp
arquivo de contentpage
componente.
Incluir todos os scripts na variável head.jsp
arquivo para o contentpage
componente para a head.jsp
arquivo para o enrollmentpage
componente.
No content.jsp
você pode adicionar conteúdo de página adicional ou referências a outros componentes incluídos quando uma página é renderizada. Por exemplo, se você adicionar o componente personalizado applicationformheader
, certifique-se de adicionar a seguinte referência ao componente no arquivo JSP:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
Da mesma forma, se você adicionar um parsys
na estrutura do nó do modelo, também inclua o componente personalizado.
A variável head.jsp
arquivo de enrollmentpage
componente para o novo modelo inclui uma biblioteca do cliente guide.theme.simpleEnrollment
. O template padrão também usa essa biblioteca do cliente. Altere o estilo no novo modelo usando um destes métodos:
guide.theme.simpleEnrollment
com o tema personalizado.O tema se refere a uma biblioteca do cliente incluída no componente Página usado para renderizar um formulário adaptável. A biblioteca do cliente rege principalmente a aparência de um formulário adaptável.