Componentes principais dos formulários adaptáveis adaptive-forms-core-components-introduction
Usando os componentes principais dos formulários adaptáveis do Adobe Experience Manager, e possível criar experiências de inscrição atraentes.
Componentes principais overview
No Adobe Experience Manager (AEM), os componentes são os elementos usados para criar páginas e formulários. Eles fornecem uma maneira simples e eficiente para os autores criarem e gerenciarem conteúdo, além de fornecerem aos desenvolvedores a flexibilidade e a extensibilidade necessárias para criar componentes personalizados. Eles foram projetados para acelerar o tempo de desenvolvimento e reduzir os custos de manutenção de sites e formulários, ser flexíveis e poder ser facilmente personalizados para atender às necessidades específicas de um site e formulário.
Os Componentes principais também foram projetados para serem responsivos e oferecerem suporte a uma grande variedade de dispositivos, incluindo desktops, tablets e smartphones. Eles também seguem os padrões da Web e as práticas recomendadas mais recentes, tornando-os uma solução robusta e confiável para a criação de conteúdo da Web.
Em geral, os Componentes principais são uma ferramenta essencial para criar e gerenciar conteúdo da Web no AEM, fornecendo uma solução eficiente e flexível que pode ajudar a reduzir o tempo de desenvolvimento e os custos de manutenção, além de fornecer uma excelente experiência do usuário aos visitantes do site.
Componentes principais dos formulários adaptáveis
Os Componentes principais dos formulários adaptáveis são um conjunto de 30 componentes de código aberto em conformidade com a metodologia BEM, criados com base nos componentes principais do WCM do Adobe Experience Manager. Eles foram especificamente projetados para serem usados na criação dos Formulários adaptáveis, que são formulários que se adaptam ao dispositivo, navegador e tamanho da tela do usuário.
Esses componentes podem ser usados para criar experiências excepcionais de captura e registro de dados, fornecendo uma grande variedade de opções de campos de formulário, incluindo campos de texto, caixas de seleção, menus suspensos e muito mais. Eles também incluem recursos como validação, lógica condicional e design responsivo, que podem ser usados para criar formulários fáceis de usar e intuitivos.
Além disso, como esses componentes são de código aberto, os desenvolvedores têm a capacidade de personalizar e estender facilmente os componentes para atender às necessidades específicas de sua organização. Além disso, esses componentes são criados com base na metodologia BEM, que garante sua capacidade de expansão e manutenção.
Recursos features
Benefícios benefits
As experiências de captura de dados são cruciais para a geração de leads e inscrição, e os Componentes principais dos Formulários adaptáveis fornecem uma solução eficiente para criar formulários otimizados para captura de dados. Alguns dos motivos para usar os Componentes principais para criar essas experiências em componentes de base são:
-
Disponibilidade no GitHub: os componentes principais dos formulários adaptáveis do AEM são de código aberto e estão disponíveis no GitHub, juntamente com uma documentação abrangente. Isso facilita para os desenvolvedores compreender os componentes e como eles funcionam, além de contribuir para seu desenvolvimento. O site aemcomponents.dev também é um recurso valioso, em que os desenvolvedores podem ver os componentes em ação e acessar a documentação detalhada.
-
Modelo BEM para estilo: os componentes principais seguem o modelo BEM (sigla em inglês para modificador de elementos de blocos) para estilo, que é uma metodologia bem-estabelecida e amplamente usada para organizar o CSS. Isso facilita para os desenvolvedores entender como os estilos são organizados e como modificá-los para atender às suas necessidades específicas.
-
Sem dependência de bibliotecas de terceiros: uma das vantagens dos Componentes principais é que eles não têm dependência de bibliotecas JavaScript de terceiros, incluindo JQuery e Underscore. Isso torna os componentes mais rápidos e leves, além de facilitar a integração em uma implementação existente do AEM.
-
Foco no desempenho e na acessibilidade: os Componentes principais são construídos pensando no desempenho e na acessibilidade, o que se reflete em suas altas pontuações do Google Lighthouse e Web Vitals. Isso facilita para os desenvolvedores criarem páginas da Web acessíveis e de alto desempenho, o que é cada vez mais importante no cenário digital atual.
-
Componentes de formulários no Modelo e Temas do Sites 30: os Componentes principais fornecem suporte para componentes de formulário no modelo e temas do Sites 30, facilitando para os desenvolvedores criarem e personalizarem formulários no AEM.
-
Mais fácil de criar estilo: é mais fácil criar estilos nos componentes principais do que nos de de fundação. O processo de criação de temas é semelhante ao Sites, com a capacidade de herdar o mesmo tema/CSS da página principal do Sites. Além disso, o modelo BEM para estilo facilita a compreensão e a modificação dos estilos.
-
Acessibilidade: os componentes principais dos formulários adaptáveis são compatíveis com padrões e diretrizes de acessibilidade para garantir que os formulários possam ser usados por pessoas com deficiência, inclusive quem usa tecnologias de assistência, como leitores de tela.
-
Controle de versão: você pode criar e gerenciar várias versões de um formulário adaptável baseado em componentes principais, participar de discussões colaborativas por meio de comentários e anexar anotações a componentes de formulário específicos, aprimorando assim a experiência geral de criação de formulários.
Componentes disponíveis: um detalhamento por tipo de componente
A versão atual do AEM Forms inclui os seguintes componentes principais: componentes de fundação e componentes de blocos de formulário (Edge Delivery Services).
- Além dos componentes listados acima, o bloco de formulários é compatível com todos os tipos de entrada HTML5 e área de texto válidos como componentes.
- Precisa de um componente não listado acima? Solicite-o enviando um email para aem-forms-ea@adobe.com do seu endereço oficial.
Editor de formulários fácil de usar
O editor dos formulários adaptáveis baseados em componentes principais é semelhante ao que você já usa para criar páginas do AEM Sites. Veja o que você leva:
-
Elementos e configurações de interface familiares: ao configurar as propriedades dos componentes de formulários, você verá que a caixa de diálogo de propriedades se parece com as que você está usando para os componentes principais do WCM. Isso torna mais rápido encontrar as opções que você precisa. Como nos componentes principais do WCM, nos componentes de formulários, a caixa de diálogo de propriedades é exibida no centro do editor com guias claras separando as opções básicas e avançadas, o texto de ajuda e as informações de acessibilidade. Tudo isso em um formato de guias para facilitar a navegação.
-
Editor de regras: é possível adicionar recursos lógicos e dinâmicos a seus formulários sem escrever código. Você pode usar o editor de regras integrado para:
- Mostrar ou ocultar campos com base nas opções escolhidas
- Habilitar ou desabilitar um objeto
- Definir um valor para um objeto
- Realizar cálculos
- Definir a propriedade de um objeto
- Validar entrada de dados
- Chamar um serviço (chamar funcionalidade externa)
- Usar funções integradas (funções predefinidas para tarefas comuns)
- Usar funções personalizadas (seu próprio código para necessidades específicas)
- Validar campos e painéis (garantir que os dados satisfaçam os requisitos)
- Validar o valor de um objeto
- Executar funções para calcular o valor de um objeto
- Chamar um serviço de modelo de dados de formulário (FDM) e executar uma operação
- Adicionar estilos dinamicamente (alterar a aparência com base nas condições)
- Criar outras regras (ações em cadeia e lógica)
- e muito mais.
O editor de regras não tem o editor de código. Você pode usar funções personalizadas para adicionar o seu próprio código ao editor de regras para suprir necessidades específicas.
-
Preenchimento prévio de formulários: é possível preencher automaticamente determinados campos em um formulário com dados já existentes ao abri-lo. Isso economiza tempo e esforço, eliminando a necessidade de inserir manualmente informações que podem já estar disponíveis. O editor de componentes principais fornece um serviço de preenchimento prévio pronto para uso para preencher campos de formulário com a ajuda de um modelo de dados de formulário. Você também pode criar serviços de preenchimento prévio personalizados para cenários mais complexos.
-
Documento de registro (DoR): um documento de registro (DoR) se refere a uma representação formal e imprimível dos dados enviados por meio do formulário. Isso serve como um registro permanente das informações inseridas, fornecendo um instantâneo dos dados enviados em um formato intuitivo, normalmente, um documento PDF. Você pode usar o editor para configurar facilmente um modelo personalizado ou usar um modelo pronto para uso para gerar um DoR.
-
Modelo de dados de formulário: um modelo de dados de formulários adaptáveis (FDM) atua como uma ponte entre os formulários adaptáveis e as fontes de dados. Esse modelo define basicamente a estrutura e a organização dos dados que seus formulários coletam e interagem. É possível usar o editor para conectar facilmente seu formulário a um modelo de dados de formulário (FDM).
-
Envios de formulário: o envio de um formulário refere-se ao processo de envio dos formulários preenchidos. Isso aciona uma série de ações definidas na configuração do formulário, levando ao armazenamento ou processamento dos dados enviados. O editor de formulários adaptáveis oferece uma variedade de opções para configurar envios de formulários. Algumas das ações comuns de envio são:
-
Componentes principais dos formulários adaptáveis no editor de páginas do Sites: é possível habilitar e usar os componentes principais dos formulários adaptáveis no editor de páginas do AEM e nos fragmentos de experiência do AEM para criar diretamente a experiência de captura de dados, juntamente com a criação de uma página do Sites.
Habilitar os componentes principais dos formulários adaptáveis
A ativação dos Componentes principais dos formulários adaptáveis no AEM Forms as a Cloud Service permite criar, publicar e fornecer os Componentes principais baseados em formulários, adaptáveis e headless, usando as instâncias do AEM Forms Cloud Service para vários canais. Para obter instruções detalhadas sobre como habilitar os Componentes principais dos formulários adaptáveis, consulte Habilitar componentes principais de formulários adaptáveis no AEM Forms as a Cloud Service e no ambiente de desenvolvimento local.
Os Componentes principais dos Formulários adaptáveis têm os seguintes requisitos.
Se sua versão do SDK do AEM Cloud Service for anterior à 2023.02.0, certifique-se de que o sinalizador prerelease esteja habilitado em seu ambiente, pois os Componentes principais de formulários adaptáveis faziam parte do pré-lançamento antes da versão 2023.02.0.
Criar um formulário adaptável baseado nos Componentes principais
É possível executar as seguintes ações nos ambientes do AEM Forms as a Cloud Service ou do AEM Forms 6.5: