Personalizar componentes principais dos formulários adaptáveis
Personalizar os componentes principais dos formulários adaptáveis permite adaptar as funcionalidades prontas para uso para que atendam a necessidades específicas. Este guia orienta você pelo processo de personalização desses componentes, a fim de criar uma experiência mais individual.
Pré-requisito
Antes de começar a personalizar os componentes principais dos formulários adaptáveis,
-
Saiba mais sobre a arquitetura de um componente principal e consulte a documentação oficial dos Componentes principais do Adobe Experience Manager. Esses recursos abrangentes servem como guia durante todo o processo de personalização.
-
Configure o ambiente de desenvolvimento para garantir um fluxo de trabalho tranquilo para fazer alterações nos componentes principais. Ao configurar o ambiente de desenvolvimento, use um arquétipo de projeto do AEM com base no arquétipo mais recente do AEM. Com base em seu ambiente, você pode:
Personalizar um componente principal dos formulários adaptáveis
Siga as etapas abaixo para modificar a aparência, o comportamento e a funcionalidade de um componente principal dos formulários adaptáveis.
-
Identificar e duplicar o componente principal
Ao configurar o ambiente de desenvolvimento, você criou um projeto com base em um arquétipo. No projeto de arquétipo do AEM, identifique o componente principal específico que deseja personalizar. Depois de identificá-lo, crie uma duplicata do componente no projeto de arquétipo do AEM. Mantenha-o em paralelo a outros componentes principais de formulários adaptáveis. Essa etapa garante que seus esforços de personalização não afetem o componente original, permitindo uma livre experimentação.
-
Personalizar o componente copiado
Abra o componente duplicado e comece a fazer as modificações necessárias de acordo com suas necessidades:
- Personalizar estrutura HTML: adapte a estrutura HTML para atender às suas necessidades de design, respeitando as práticas de estilo do BEM (Modificador de elemento de bloco) para códigos com capacidade de manutenção e expansão.
- Atualizar rótulo: atualize o rótulo do componente para fornecer um nome claro e descritivo para a versão personalizada. Consulte o Modelo de rótulo OOTB (pronto para uso) fornecido para obter consistência.
- Personalizar widget: ajuste o widget usado no componente (listas suspensas, caixas de seleção) para alinhar-se ao seu caso de uso específico. Consulte o exemplo de implementação de widget para referência.
- Texto de ajuda e dicas de ferramentas: personalize o texto de ajuda ou as dicas de ferramentas associadas ao componente para oferecer contexto e orientação aos usuários. Use o Modelo de texto de ajuda OOTB como ponto de partida.
- Atributos de dados: incorpore todos os atributos de dados necessários nos elementos HTML do componente. Esses atributos são cruciais para o funcionamento adequado do componente no tempo de execução. Consulte a documentação para entender a função dos atributos de dados nos componentes principais dos formulários adaptáveis.
-
Implementar a lógica de back-end
Se sua personalização exigir uma lógica de back-end, é possível estender modelos do Sling existentes. Consulte o exemplo fornecido para integrar de forma simples a funcionalidade desejada ao componente personalizado.
-
Configurar a caixa de diálogo do componente
Configure a caixa de diálogo associada ao componente personalizado. Use a caixa de diálogo de componente de exemplo fornecida na documentação para garantir que as interações e configurações do usuário sejam gerenciadas adequadamente.
-
Implante e teste o componente no seu ambiente de desenvolvimento local
Use o Maven para criar e implantar o componente no ambiente de desenvolvimento local. Depois que o componente for implantado, crie um formulário adaptável para testar o componente personalizado.
-
Implante o componente personalizado no ambiente de produção
Depois de testar o componente no ambiente de desenvolvimento local, implante-o nos ambientes de produção.