DocumentaçãoAEM 6.5Guia do usuário

Tutorial: Criar um formulário adaptável do-not-publish-tutorial-create-an-adaptive-form

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

02-criar-forma-adaptável-imagem-principal

Este tutorial é uma etapa da série Criar o primeiro formulário adaptável. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso completo do tutorial.

Sobre o tutorial about-the-tutorial

Formulários adaptáveis são formulários de nova geração que são dinâmicos e responsivos. Você pode usar formulários adaptáveis para fornecer experiências personalizadas. Você também pode integrar formulários adaptáveis com Adobe Analytics para estatísticas de uso e Adobe Campaign para gerenciamento de campanha. Para obter mais informações sobre os recursos de formulários adaptáveis, consulte Introdução à criação de formulários adaptáveis.

É mais fácil criar e gerenciar formulários quando um processo adequado é seguido. Neste artigo, você aprenderá a:

No final do artigo, você terá um formulário semelhante ao seguinte:
Visualização de formulário em dispositivo móvel

Etapa 1: criar o formulário adaptável step-create-the-adaptive-form

  1. Faça logon na instância de autor do AEM e navegue até Adobe Experience Manager > Forms > Forms e Documentos. A URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Selecione Criar e selecione Formulário adaptável. Uma opção para selecionar um modelo é exibida. Selecione o modelo Em branco para selecioná-lo e selecione Avançar.

  3. Uma opção para Adicionar Propriedades é exibida. Os campos Título e Nome são obrigatórios:

    • Título: especifique Add new or update shipping address no campo Título. O campo de título especifica o nome de exibição do formulário. O título ajuda a identificar o formulário na interface do usuário do AEM Forms.
    • Nome: especifique shipping-address-add-update-form no campo Nome. O campo Nome especifica o nome do formulário. Um nó com o nome especificado será criado no repositório. Ao começar a digitar um título, o valor do campo de nome é gerado automaticamente. É possível alterar o valor sugerido. O campo de nome pode incluir apenas caracteres alfanuméricos, hifens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.

  4. Selecione Criar. Um formulário adaptável é criado e uma caixa de diálogo para abrir o formulário para edição é exibida. Selecione Abrir para abrir o formulário recém-criado em uma nova guia. O formulário é aberto para edição. Também exibirá a barra lateral para personalizar o formulário recém-criado de acordo com as necessidades.

    Para obter informações sobre a interface de criação de formulários adaptáveis e os componentes disponíveis, consulte Introdução à criação de formulários adaptáveis.

    Um formulário adaptável recém-criado.

O AEM Forms fornece muitos componentes para exibir informações em um formulário adaptável. Os componentes de Cabeçalho e Rodapé ajudam a fornecer uma aparência consistente a um formulário. Um cabeçalho normalmente inclui o logotipo de uma corporação, o título do formulário e o resumo. Um rodapé geralmente inclui informações de direitos autorais e links para outras páginas.

  1. Selecione alternar painel lateral > treeexpandall . O navegador de componentes é aberto. Arraste o componente Cabeçalho do navegador de componentes para o formulário adaptável.

  2. Selecione Logotipo. A barra de ferramentas é exibida. Selecione aem_6_3_edit na barra de ferramentas, digite We.Retail e selecione aem_6_3_forms_save .

  3. Selecione Imagem. A barra de ferramentas é exibida. Selecione cmppr . O navegador de propriedades é aberto à esquerda da tela. Procurar e carregar a imagem de logotipo. Selecione aem_6_3_forms_save . A imagem aparece no cabeçalho.

    É possível selecionar Get file para baixar o logotipo usado neste artigo, caso não tenha um.

Obter arquivo

  1. Arraste o componente Rodapé de treeexpandall para o formulário adaptável. Nesse estágio, o formulário tem a seguinte aparência:

    formulário-adaptável-com-cabeçalhos-e-rodapés

Etapa 3: adicionar componentes para capturar e exibir informações step-add-components-to-capture-and-display-information

Os componentes são blocos fundamentais de um formulário adaptável. O AEM Forms fornece muitos componentes para capturar e exibir informações em um formulário adaptável. Você pode arrastar os componentes de treeexpandall para um formulário. Para saber mais sobre os componentes disponíveis e a funcionalidade correspondente, consulte Introdução à criação de formulários adaptáveis.

  1. Arraste o componente de Caixa numérica para o formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere o Título do componente para Customer ID, altere o Nome do Elemento para customer_ID, habilite a opção Campo Obrigatório, habilite a opção Usar Tipo de Entrada de Número HTML5 e selecione aem_6_3_forms_save .

  2. Arraste três componentes Caixa de texto para o formulário adaptável. Coloque-os antes do componente de rodapé. Defina as seguintes propriedades para essas caixas de texto.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Propriedade Caixa de Texto 1 Caixa de Texto 2 Caixa de Texto 3
    Título Nome Endereço de envio Estado
    Nome do elemento customer_Name customer_Shipping_Address customer_State
    Campo obrigatório Habilitado Habilitado Habilitado
    Permitir várias linhas Desabilitado Habilitado Desabilitado

  3. Arraste um componente de Caixa Numérica antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo, Selecione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Propriedade Valor
    Título Código postal
    Nome do elemento customer_ZIPCode
    Número máximo de dígitos 6
    Campo obrigatório Habilitado
    Tipo de padrão de exibição Sem padrão

  4. Arraste um componente de Email antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e selecione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriedade Valor
    Título Email
    Nome do elemento customer_Email
    Campo obrigatório Habilitado

  5. Arraste um componente Anexo de arquivo antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e selecione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Propriedade Valor
    Título Prova de endereço aprovada pelo governo
    Nome do elemento customer_Address_Proof
    Campo obrigatório Habilitado

  6. Arraste um componente Botão Enviar para o formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere Nome do Elemento para address_addition_update_submit, selecione aem_6_3_forms_save . O layout do formulário está completo e o formulário tem a seguinte aparência:

    formulário-adaptável-com-todos-os-componentes

Etapa 4: configurar a ação de envio para o formulário adaptável step-configure-submit-action-for-the-adaptive-form

Uma ação de envio é acionada quando um usuário toca no botão Enviar em um formulário adaptável. Você pode usar uma ação enviar para salvar dados de formulário no repositório local, enviar dados de formulário para um terminal REST, enviar dados de formulário como um email e muito mais. Os formulários adaptáveis fornecem mais algumas ações de envio prontas para uso. Para obter informações detalhadas, consulte Configurando a ação Enviar.

Usando as etapas a seguir, você pode configurar a ação de envio de email e a ação de envio de demonstração do formulário:

  1. Configure o servidor de email. Para obter detalhes, consulte Configurando Notificação por Email.

  2. Selecione Contêiner de Formulário no Navegador de conteúdo e selecione cmppr . O navegador de propriedades é aberto à esquerda.

  3. Ir para Envio > Ação de Envio. Selecione Enviar Email. Especifique os seguintes valores e selecione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Propriedade Valor
    De donotreply@weretail.com
    Para ${customer_Email}
    Assunto Confirmação: você adicionou o endereço de entrega no site We.Retail.
    Modelo de e-mail Olá ${customer_Name}, O seguinte endereço foi adicionado como o endereço de entrega para sua conta:
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode}
    Atenciosamente, We.Retail
    Incluir anexos Habilitado

    Seu formulário está pronto. Agora, você pode visualizar o formulário e testar a funcionalidade. Se você tiver usado o nome mencionado no tutorial e acessado o formulário na máquina que executa o servidor AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Etapa 5: Visualizar e enviar o formulário adaptável step-preview-and-submit-the-adaptive-form

Você pode usar a opção de Visualização para avaliar a aparência e o comportamento de um formulário. É possível enviar um formulário no modo de visualização e também verificar as validações aplicadas em um formulário. Por exemplo, se um erro for exibido quando um campo obrigatório estiver vazio.

Os formulários adaptáveis também fornecem uma opção para Emular a experiência de um formulário para vários dispositivos. Por exemplo, iPhone, iPad e Desktop. Você pode usar as opções Visualizar e Emulador régua juntas entre si para visualizar um formulário para dispositivos de tamanhos de tela diferentes.

  1. Selecione a opção Visualizar no lado direito do editor de formulários. O formulário é aberto no modo de visualização. Se você tiver usado o nome mencionado no tutorial, a URL de visualização do formulário será http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Use a régua para exibir a aparência do formulário em vários dispositivos.
  3. Preencha os campos do formulário e selecione Enviar. O formulário é enviado e você é redirecionado para a página Obrigado padrão. Você também pode especificar uma página de agradecimento personalizada. Para obter detalhes, consulte Configurando página de redirecionamento.

O formulário adaptável para adicionar um endereço está pronto. Se você tiver usado o nome mencionado no tutorial e acessado o formulário na máquina que executa o servidor do AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2