Criação de um modelo de formulário adaptável personalizado

Pré-requisitos

• Noções básicas sobre o modelo de página do AEM e criação de formulário adaptável

• Compreensão das bibliotecas do lado do cliente do AEM

Adaptive form template

Um modelo de formulário adaptável é um modelo de página AEM especializado, 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.

Modelos de formulário adaptável padrão

O AEM QuickStart fornece os seguintes modelos de formulário adaptáveis:

• Modelo de pesquisa: Permite criar um formulário adaptável de página única usando o layout Responsivo que tem várias colunas configuradas. O layout se ajusta automaticamente com base nas dimensões das várias telas nas quais você deseja exibir o formulário.
• Modelo de inscrição simples: Permite criar um formulário adaptável de várias etapas usando um layout de assistente. Neste layout, você pode especificar uma expressão de conclusão de etapa para cada etapa, que é validada antes que o assistente prossiga para a próxima etapa.
• Modelo de inscrição com guias: Permite criar um formulário adaptável de várias guias usando um layout de guias à esquerda, onde é possível visitar guias em qualquer ordem aleatória.
• Modelo de inscrição avançada: Permite criar um formulário com várias guias e assistente. Ele usa um layout de guias à esquerda que permite visitar guias em qualquer ordem. Ele usa os serviços de design da Adobe Document Cloud para assinatura e verificação.
• Modelo em branco: Permite criar um formulário sem qualquer cabeçalho, rodapé e conteúdo inicial. Você pode adicionar componentes como caixas de texto, botões e imagens. O modelo em branco permite criar um formulário que pode ser incorporado nas páginasdo site do AEM.

Esses modelos têm a sling:resourceType propriedade definida para o componente de página correspondente. O componente de 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 modelos e componentes de página:

Criação de um modelo de formulário adaptável usando o editor de modelo

É 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. O Editor de modelos AEM permite:

• Adicionar componentes de cabeçalho e rodapé de um formulário na camada de estrutura
• Forneça o conteúdo inicial do formulário.
• Especifique um tema.
• Especifique ações como enviar, redefinir e navegar.

Para obter mais informações, consulte Editor de modelos.

Criação de um modelo de formulário adaptável a partir do CRXDE

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 contêineres 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.

Execute as seguintes etapas para criar um modelo personalizado, como simpleEnrollmentTemplate.

1. Navegue até CRXDE Lite na sua instância de criação.

2. 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.

3. Navegue até a pasta /libs/fd/af/models.

4. Copie o simpleEnrollmentTemplate nó.

5. Navegue até a pasta /apps/mycompany/models. Clique com o botão direito do mouse nele e selecione Colar.

6. Se necessário, renomeie o nó de modelo copiado. Por exemplo, renomeie-o como modelo de inscrição.

7. Navegue até o local /apps/mycompany/models/enrollment-template.

8. Modifique as propriedades jcr:title e jcr:description do jcr:content nó para distinguir o modelo do modelo copiado.

9. O jcr:content nó do modelo modificado contém os componentes guideContainer e guideformtitle . guideContainer é o contêiner que contém o formulário adaptável. O guideformtitle componente exibe o nome do aplicativo, a descrição e assim por diante.

   Em vez de guideformtitle, você pode incluir um componente personalizado ou o parsys componente. Por exemplo, remova guideformtitlee adicione um componente personalizado ou o nó do parsys componente. Certifique-se de que a sling:resourceType propriedade do componente faça referência ao componente e que o mesmo esteja definido no arquivo da página component.jsp .

10. Navegue até o local /apps/mycompany/models/enrollment-template/jcr:content.

11. Abra a guia Propriedades e altere o valor da cq:designPath propriedade para /etc/designs/mycompany.

12. Agora, crie um nó /etc/designs/mycompany para o cq:Page tipo.

Criar um componente de página de formulário adaptável

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.

1. 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

2. Copie o nó /libs/fd/af/components/page/base para a pasta /apps/mycompany/components/page.

3. Renomeie o componente copiado para enrollmentpage.

4. (Somente se você já tiver uma página de conteúdo) Execute as seguintes etapas (a-d), se você tiver um contentpagecomponente existente para seu site. Se você não tiver um contentpagecomponente existente para seu site, poderá deixar a resourceSuperTypepropriedade para apontar para a página base OOTB.

   1. Para o enrollmentpage nó, defina o valor da propriedade sling:resourceSuperType como mycompany/components/page/contentpage. O contentpage componente é 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.jspe library.jsp. O 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 do contentpage componente.

   2. Open the file head.jsp.

      O arquivo JSP contém a linha <cq.include script="library.jsp"/>.

      O library.jsp arquivo contém a biblioteca guide.theme.simpleEnrollment cliente, que contém o estilo do formulário adaptável.

      O componente de página enrollmentpage tem um arquivo exclusivo head.jsp que substitui o head.jsp arquivo do contentpage componente.

   3. Inclua todos os scripts no head.jsp arquivo do contentpage componente no head.jsp arquivo do enrollmentpage componente.

   4. No content.jsp script, você pode adicionar conteúdo de página ou referências a outros componentes que são incluídos quando uma página é renderizada. Por exemplo, se você adicionar o componente personalizado applicationformheader, adicione 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 componente na estrutura do nó do modelo, inclua também o componente personalizado.

Criação de uma biblioteca de cliente de formulário adaptável

O head.jsp arquivo do enrollmentpage componente para o novo modelo inclui uma biblioteca do 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:

• Defina um tema personalizado e substitua o tema padrão guide.theme.simpleEnrollment pelo tema personalizado.
• Defina uma nova biblioteca de cliente em /etc/designs/mycompany. Inclua a biblioteca do cliente após a entrada do tema padrão na página jsp. Inclua todos os estilos substituídos e arquivos Java Script adicionais nesta biblioteca de cliente.