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,

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.

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

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

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

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

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c