A AEM Forms introduziu 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. Instale o pacote de compatibilidade para obter esses modelos no seu ambiente.
Noções básicas sobre AEM Modelo de página e Criação de formulário adaptável
Noções básicas sobre AEM bibliotecas do lado do cliente
Um modelo de formulário adaptável é especializado AEM modelo de página, com determinadas propriedades e estrutura de conteúdo usadas para criar o formulário adaptável. O modelo tem layouts pré-configurados, estilos e estrutura básica de conteúdo inicial.
Após a criação de um formulário, quaisquer alterações na estrutura de conteúdo do modelo original não serão refletidas no formulário.
AEM QuickStart fornece os seguintes modelos de formulário adaptáveis:
Esses modelos têm a propriedade sling:resourceType
definida como o componente de página correspondente. O componente de página renderiza a página CQ, contendo o container de formulário adaptável, que por sua vez renderiza o formulário adaptável.
A tabela a seguir enumera a associação entre modelos e componentes de página:
Modelo |
Componente da página |
/libs/fd/af/models/surveyTemplate |
/libs/fd/af/components/page/pesquisa |
/libs/fd/af/models/simpleEnrollmentTemplate |
/libs/fd/af/components/page/base |
/libs/fd/af/models/tabbedEnrollmentTemplate |
/libs/fd/af/components/page/tabbedenrollment |
/libs/fd/afaddon/models/advancedEnrollmentTemplate |
/libs/fd/afaddon/components/page/advancedenrollment |
É possível 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ários tenham poucas caixas de texto, botões de navegação e um botão Enviar em um formulário de inscrição. É possível criar um modelo que os autores possam usar para criar um formulário consistente com outros formulários de inscrição. AEM Editor de modelos permite:
Para obter mais informações, consulte Editor de modelos.
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 baseiam-se em vários componentes de página que fazem referência a container de formulário adaptáveis 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, você pode estender o componente de página do formulário adaptável que os modelos usam para uso imediato.
Execute as seguintes etapas para criar um modelo personalizado, como simpleEnrollmentTemplate.
Navegue até CRXDE Lite na sua instância de criação.
No diretório /apps, crie a estrutura de pastas para seu aplicativo. Por exemplo, se o nome do aplicativo for minha empresa, crie uma pasta com esse nome. Normalmente, a pasta do aplicativo contém componentes, configuração, modelos, src e diretórios de instalação. Neste exemplo, crie as pastas de componentes, configuração e modelos.
Navegue até a pasta /libs/fd/af/models.
Copie o nó simpleEnrollmentTemplate
.
Navegue até a pasta /apps/mycompany/models. Clique com o botão direito do mouse nele e selecione Colar.
Se necessário, renomeie o nó de modelo copiado. Por exemplo, renomeie-o como modelo de inscrição.
Navegue até o local /apps/mycompany/models/enrollment-template.
Modifique as propriedades jcr:title
e jcr:description
do nó jcr:content
para distinguir o modelo do modelo copiado.
O nó jcr:content
do modelo modificado contém os componentes guideContainer
e guideformtitle
. guideContainer
é o container que contém o formulário adaptável. O componente guideformtitle
exibe o nome do aplicativo, a descrição e assim por diante.
Em vez de guideformtitle
, você pode incluir um componente personalizado ou o componente parsys
. Por exemplo, remova guideformtitle
e adicione um componente personalizado ou o nó do componente parsys
. Certifique-se de que a propriedade sling:resourceType
do componente referencie o componente e que o mesmo esteja definido no arquivo de página component.jsp
.
Navegue até o local /apps/mycompany/models/enrollment-template/jcr:content.
Abra a guia Propriedades e altere o valor da propriedade cq:designPath
para /etc/designs/mycompany.
Agora, crie um nó /etc/designs/mycompany para o tipo cq:Page
.
O modelo personalizado tem o mesmo estilo que o 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
definida no nó /apps/mycompany/models/enrollment-template/jcr:content. Como a base é um componente principal do produto, não modifique esse componente.
Navegue até o nó /apps/mycompany/models/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.
Renomeie 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 um contentpage
componente existente para seu site. Se você não tiver um contentpage
componente existente para seu site, poderá deixar a propriedade resourceSuperType
para apontar para a página base OOTB.
Para o nó enrollmentpage
, defina o valor da propriedade sling:resourceSuperType
como mycompany/components/page/contentpage. O componente contentpage
é o componente básico da página do site. Outros componentes da página podem estendê-la. Remova os arquivos de script em enrollmentpage
, exceto head.jsp
, content.jsp
e library.jsp
. O componente sling:resourceSuperType
, que é contentpage
nesse caso, inclui todos esses scripts. Os cabeçalhos, incluindo a barra de navegação e o rodapé, são herdados do componente contentpage
.
Abra o arquivo head.jsp
.
O arquivo JSP contém a linha <cq.include script="library.jsp"/>
.
O arquivo library.jsp
contém a biblioteca do cliente guide.theme.simpleEnrollment
, que contém o estilo do formulário adaptável.
O componente de página enrollmentpage
tem um arquivo head.jsp
exclusivo que substitui o arquivo head.jsp
do componente contentpage
.
Inclua todos os scripts no arquivo head.jsp
do componente contentpage
no arquivo head.jsp
do componente enrollmentpage
.
No script content.jsp
, é possível adicionar conteúdo de página ou referências adicionais 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 componente parsys
na estrutura do nó do modelo, inclua também o componente personalizado.
O arquivo head.jsp
do componente enrollmentpage
do novo modelo inclui uma biblioteca de cliente guide.theme.simpleEnrollment
. O modelo padrão também usa essa biblioteca de cliente. Altere o estilo no novo modelo usando um destes métodos:
guide.theme.simpleEnrollment
pelo tema personalizado.O tema refere-se a uma biblioteca de cliente incluída no componente de página usado para renderizar um formulário adaptável. A biblioteca cliente governa principalmente a aparência de um formulário adaptável.