Criação de fragmentos de formulário no Editor universal
Os fragmentos de formulário são componentes reutilizáveis que eliminam o trabalho de desenvolvimento repetitivo e garantem a consistência entre os formulários de sua organização. Em vez de recriar seções comuns, como informações de contato, detalhes de endereço ou contratos de consentimento para cada formulário, você pode criar esses elementos uma vez como fragmentos e reutilizá-los em vários formulários.
O que você realizará neste artigo:
- Compreender o valor comercial e os recursos técnicos dos fragmentos de formulário
- Criar fragmentos de formulário reutilizáveis usando o Editor universal
- Integrar fragmentos em formulários existentes com a configuração adequada
- Gerenciar o ciclo de vida do fragmento e manter a consistência entre formulários
Benefícios para os negócios:
- Tempo de desenvolvimento reduzido: criar seções de formulário comuns uma vez, reutilizar em todos os lugares
- Consistência aprimorada: layouts e conteúdo padronizados em todos os formulários
- Manutenção simplificada: atualize um fragmento uma vez para refletir as alterações em todos os formulários que o utilizam
- Conformidade aprimorada: garanta que as seções normativas permaneçam consistentes e atualizadas
Os fragmentos de formulário no Edge Delivery Services oferecem suporte a recursos avançados, incluindo fragmentos aninhados, várias instâncias em um único formulário e integração contínua com fontes de dados.
Noções básicas sobre fragmentos de formulário
Os fragmentos de formulário no Edge Delivery Services fornecem recursos avançados para o desenvolvimento de formulários modulares:
Principais recursos:
- Gerenciamento de consistência: os fragmentos mantêm layouts e conteúdo idênticos em vários formulários. Com uma abordagem "alterar uma vez, refletir em qualquer lugar", as atualizações de um fragmento são automaticamente aplicadas a todos os formulários no modo Visualização.
- Uso múltiplo: adicione o mesmo fragmento várias vezes em um único formulário, cada um com dados independentes associados a diferentes fontes de dados ou elementos de esquema.
- Estruturas aninhadas: crie hierarquias complexas incorporando fragmentos a outros fragmentos para arquiteturas de formulário sofisticadas.
Requisitos técnicos:
- Consistência de URL do GitHub: o fragmento e qualquer formulário que o utilize devem especificar a mesma URL de repositório do GitHub
- Edição independente: os fragmentos só podem ser modificados em sua forma independente; as alterações não podem ser feitas no formulário do host
Comportamento da publicação:
Pré-requisitos
Requisitos de configuração técnica:
- Repositório GitHub configurado com conexão estabelecida entre seu ambiente AEM e o repositório GitHub
- Bloco Adaptive Forms mais recente adicionado ao seu repositório GitHub (para projetos Edge Delivery Services existentes)
- Instância do autor do AEM Forms com modelo do Edge Delivery Services disponível
- Acesso ao URL da instância do autor do AEM Forms as a Cloud Service e ao URL do repositório do GitHub
Conhecimentos e permissões necessários:
- Compreensão básica de conceitos de design de formulário e hierarquia de componentes
- Familiaridade com a interface do Editor universal e workflows de criação de formulários
- Permissões no nível do autor no AEM Forms para criar e gerenciar ativos de formulário
- Noções básicas sobre os padrões de formulários de sua organização e requisitos de componentes reutilizáveis
Trabalhar com fragmentos de formulário do Edge Delivery Services
Você pode criar fragmentos de formulário do Edge Delivery Services no Editor universal e adicionar os fragmentos criados aos formulários do Edge Delivery Services. Você pode executar as seguintes ações com os fragmentos de formulário do Edge Delivery Services:
Para criar um fragmento de formulário no Universal Editor, execute as seguintes etapas:
-
Faça logon na instância de autor do AEM Forms as a Cloud Service.
-
Selecione Adobe Experience Manager > Forms > Forms e Documentos.
-
Clique em Criar > Fragmento de formulário adaptável.
O assistente Criar fragmento de formulário adaptável é exibido.
-
Selecione o modelo baseado em Edge Delivery Services na guia Selecionar modelo e clique em Avançar.
-
Especifique título, nome, descrição e tags para o fragmento. Certifique-se de especificar um nome exclusivo para o fragmento. Se outro fragmento existir com o mesmo nome, o fragmento não será criado.
-
Especifique a URL do GitHub. Por exemplo, se o repositório GitHub for nomeado como
edsforms, ele estará localizado na contawkndforms, a URL seráhttps://github.com/wkndforms/edsforms.
-
(Opcional) Clique para abrir a guia Modelo de formulário e, no menu suspenso Selecionar de, selecione um dos seguintes modelos para o fragmento:
-
Modelo de dados de formulário (FDM): integre objetos de modelo de dados e serviços de fontes de dados ao seu fragmento. Escolha Modelo de dados de formulário (FDM) se o formulário exigir leitura e gravação de dados de várias fontes.
-
Esquema JSON: integre seu formulário a um sistema de back-end associando um esquema JSON que define a estrutura de dados. Ela permite adicionar conteúdo dinâmico usando os elementos do esquema.
-
Nenhum: especifica criar o fragmento do zero sem usar nenhum modelo de formulário.
note note NOTE Para saber como integrar formulários ou fragmentos a um Modelo de dados de formulário (FDM) no Editor Universal para usar fontes de dados de back-end diversas, consulte Integrar formulários com o Modelo de dados de formulário no Editor Universal. -
-
(Opcional) Especifique a Data de publicação ou a Data de cancelamento da publicação do fragmento na guia Avançado.
-
Clique em Criar para gerar o fragmento. Uma caixa de diálogo de sucesso é exibida com opções de edição.
-
Clique em Editar para abrir o fragmento no Universal Editor com o modelo padrão aplicado.
-
Crie o conteúdo do fragmento: adicione componentes de formulário (campos de texto, listas suspensas, caixas de seleção) para criar a seção reutilizável. Para obter orientações detalhadas sobre componentes, consulte Introdução ao Edge Delivery Services para AEM Forms usando o Universal Editor.
-
Configurar propriedades do componente: defina nomes de campos, regras de validação e valores padrão conforme necessário para o caso de uso.
-
Salvar e visualizar: salve o fragmento e use o modo de Visualização para verificar o layout e a funcionalidade.
Ponto de verificação de validação:
- Carregamento de fragmento sem erros no Universal Editor
- Todos os componentes do formulário são renderizados corretamente
- As propriedades de campo e as regras de validação funcionam conforme esperado
- O fragmento é salvo e está disponível no console Forms e documentos
Depois que o fragmento for concluído, você poderá integrá-lo a qualquer formulário do Edge Delivery Services.
Este exemplo demonstra a criação de um formulário Employee Details que usa o fragmento Contact Details para as seções de informações do funcionário e do supervisor. Essa abordagem garante uma coleta de dados consistente e, ao mesmo tempo, reduz o esforço de desenvolvimento.
Para integrar um fragmento de formulário ao formulário:
-
Abra o formulário no modo de edição.
-
Adicione o componente Fragmento de formulário ao formulário.
-
Abra o navegador Conteúdo e navegue até o componente Formulário adaptável na Árvore de conteúdo.
-
Navegue até a seção em que deseja adicionar um fragmento. Por exemplo, navegue até o painel Detalhes do Funcionário.
-
Clique no ícone Adicionar e adicione o componente Fragmento de Formulário da lista Componentes de Formulário Adaptáveis.
Ao selecionar o componente Fragmento de formulário, o fragmento é adicionado ao formulário. Você pode configurar as propriedades do fragmento adicionado abrindo suas Propriedades. Por exemplo, oculte o título do fragmento de suas Propriedades.
-
Selecione a Referência do fragmento na guia Básico. Todos os fragmentos disponíveis para o formulário, dependendo do modelo do formulário, são exibidos.
Por exemplo, navegue até
/content/forms/afe selecione o fragmentoContact Details.
-
Clique em Selecionar.
O fragmento de formulário é adicionado por referência ao formulário e permanece sincronizado com o fragmento de formulário independente.
note note NOTE O botão Editar fragmento permite que os usuários naveguem diretamente para o fragmento do formulário para edição. Você pode visualizar o formulário para ver como ele aparece no modo Visualização.
Da mesma forma, você pode repetir as Etapas de 3 a 7 para inserir o fragmento
Contact Detailspara o painelSupervisor Details.
É possível executar várias operações em fragmentos de formulário usando a interface do usuário do AEM Forms.
-
Faça logon na instância de autor do AEM Forms as a Cloud Service.
-
Selecione Adobe Experience Manager > Forms > Forms e Documentos.
-
Selecione um fragmento de formulário e a barra de ferramentas exibe as seguintes operações que você pode executar no fragmento selecionado.
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 html-authored no-header Operação Descrição Editar Abre o fragmento de formulário no modo de edição. Propriedades Fornece opções para modificar as propriedades do fragmento de formulário. Copiar Fornece opções para copiar o fragmento de formulário e colá-lo no local desejado. Visualização Fornece opções para visualizar o fragmento como HTML ou executar uma visualização personalizada mesclando dados de um arquivo XML com o fragmento. Download Baixa o fragmento selecionado. Iniciar revisão/Gerenciar revisão Permite iniciar e gerenciar uma revisão do fragmento selecionado. Publicar/Desfazer publicação Publica/cancela a publicação do fragmento selecionado. Excluir Exclui o fragmento selecionado. Comparar Compara dois fragmentos de formulário diferentes para fins de visualização.
Práticas recomendadas
Design e nomenclatura do fragmento:
- Usar nomes descritivos e exclusivos: escolha nomes que indiquem claramente a finalidade do fragmento (por exemplo, "detalhes de contato com validação" em vez de "fragmento1")
- Planejar reutilização: crie fragmentos para que eles sejam independentes de contexto para que funcionem em diferentes tipos de formulário
- Manter fragmentos focalizados: crie fragmentos de finalidade única em vez de componentes complexos de várias funções
Fluxo de trabalho de desenvolvimento:
- Testar fragmentos independentemente: verifique a funcionalidade do fragmento antes de integrar a formulários
- Manter URLs consistentes do GitHub: verifique se a mesma URL de repositório é usada em todos os fragmentos e formulários relacionados
- Finalidade do fragmento do documento: incluir descrições e marcas claras para ajudar os membros da equipe a entender quando usar cada fragmento
Publicação e manutenção:
- Coordenar publicação: ao atualizar fragmentos, planeje republicar todos os formulários dependentes simultaneamente
- Controle de versão: usar mensagens de confirmação relevantes ao atualizar fragmentos para rastrear alterações ao longo do tempo
- Monitorar dependências: controle quais formulários usam cada fragmento para avaliar o impacto da atualização
Resumo
Você aprendeu com sucesso a usar os fragmentos de formulário no Edge Delivery Services para melhorar a eficiência do desenvolvimento e manter a consistência nos formulários de sua organização.
Principais realizações:
- Noções básicas: o valor comercial e os recursos técnicos dos fragmentos de formulário foram obtidos
- Criação: fragmentos de formulário reutilizáveis compilados usando o Editor Universal com configuração adequada
- Integração: adição de fragmentos a formulários com configuração de propriedade e configuração de referência corretas
- Gerenciamento: operações de ciclo de vida de fragmento exploradas e fluxos de trabalho de manutenção
Próximas etapas:
- Crie uma biblioteca de fragmentos usados com frequência para sua organização.
- Estabeleça convenções de nomenclatura e políticas de governança para o uso de fragmentos.
- Explore uma integração avançada com os Modelos de dados de formulário para fragmentos dinâmicos orientados por dados
- Implemente modelos de formulário baseados em fragmento para obter experiências consistentes do usuário.
Seus formulários agora se beneficiam de uma arquitetura modular e que pode ser dimensionada com eficiência entre os projetos, garantindo ao mesmo tempo experiências consistentes do usuário.