Tutorial: Criar um formulário adaptável

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.

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.

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.

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.

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

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

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

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

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

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 .

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

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 .

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

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 .

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 . O layout do formulário está completo e o formulário tem a seguinte aparência:

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

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

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

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.