Personalizar componentes principais 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.