Envio assíncrono de formulários adaptáveis

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

Tradicionalmente, os formulários web são configurados para enviar de forma síncrona. No envio síncrono, quando os usuários enviam um formulário, eles são redirecionados para uma página de confirmação, uma página de agradecimento ou, se houver falha de envio, uma página de erro. No entanto, experiências da Web modernas, como aplicativos de página única, estão ganhando popularidade, onde a página da Web permanece estática enquanto a interação cliente-servidor acontece em segundo plano. Agora você pode fornecer essa experiência com formulários adaptáveis configurando o envio assíncrono.

No envio assíncrono, quando um usuário envia um formulário, o desenvolvedor do formulário conecta uma experiência separada, como redirecionar para outro formulário ou uma seção separada do site. O autor também pode conectar serviços separados, como enviar dados para um armazenamento de dados diferente ou adicionar um mecanismo de análise personalizado. Se houver envio assíncrono, um formulário adaptável se comporta como um aplicativo de página única, pois o formulário não é recarregado ou sua URL não é alterada quando os dados do formulário enviado são validados no servidor.

Leia para obter detalhes sobre envio assíncrono em formulários adaptáveis.

Configurar envio assíncrono

Para configurar o envio assíncrono para um formulário adaptável:

1. No modo de criação do formulário adaptável, selecione o objeto Contêiner de formulário e selecione para abrir suas propriedades.

2. No Envio seção de propriedades, ativar Usar envio assíncrono.

3. No Ao enviar selecione uma das seguintes opções a serem executadas no envio bem-sucedido do formulário.

   • Redirecionar para URL: redireciona para a URL ou página especificada no envio do formulário. Você pode especificar um URL ou procurar para escolher o caminho para uma página no URL/caminho de redirecionamento campo.
   • Mostrar mensagem: exibe uma mensagem no envio do formulário. Você pode escrever uma mensagem no campo de texto abaixo da opção Mostrar mensagem. O campo de texto é compatível com a formatação de rich text.

4. Selecionar para salvar as propriedades.

Como o envio assíncrono funciona

O AEM Forms fornece manipuladores de sucesso e erro prontos para uso para envios de formulários. Os manipuladores são funções do lado do cliente executadas com base na resposta do servidor. Quando um formulário é enviado, os dados são transmitidos ao servidor para validação, o que retorna uma resposta ao cliente com informações sobre o evento bem-sucedido ou com erro para o envio. As informações são passadas como parâmetros para o manipulador relevante para executar a função.

Além disso, os autores e desenvolvedores de formulários podem escrever regras no nível do formulário para substituir os manipuladores padrão. Para obter mais informações, consulte Substituir manipuladores padrão usando regras.

Primeiro, vamos analisar a resposta do servidor em busca de eventos de sucesso e erro.

Resposta do servidor para evento de sucesso de envio

A estrutura da resposta do servidor para o evento de sucesso de envio é a seguinte:

{
  contentType : "<xmlschema or jsonschema>",
  data : "<dataXML or dataJson>" ,
  thankYouOption : <page/message>,
  thankYouContent : "<thank you page url/thank you message>"
}

A resposta do servidor se o envio de um formulário for bem-sucedido inclui:

• Tipo de formato de dados de formulário: XML ou JSON
• Dados de formulário em formato XML ou JSON
• Opção selecionada para redirecionar para uma página ou exibir uma mensagem conforme configurado no formulário
• URL da página ou conteúdo da mensagem conforme configurado no formulário

O manipulador de sucesso lê a resposta do servidor e redireciona adequadamente para o URL da página configurada ou exibe uma mensagem.

Resposta do servidor para evento de erro de envio

A estrutura da resposta do servidor para o evento de erro de envio é a seguinte:

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

   errors : [
               { "somExpression" : "<SOM Expression>",
                 "errorMessage"  : "<Error Message>"
               },
               ...
             ]
 }

A resposta do servidor se houver um erro no envio do formulário inclui:

• Motivo do erro, falha no CAPTCHA ou validação no lado do servidor
• Lista de objetos de erro, que inclui a expressão SOM do campo cuja validação falhou e a mensagem de erro correspondente

O manipulador de erros lê a resposta do servidor e exibe a mensagem de erro no formulário.

Substituir manipuladores padrão usando regras

Desenvolvedores de formulários e autores podem escrever regras, no nível do formulário, no editor de código para substituir manipuladores padrão. A resposta do servidor para eventos de sucesso e erro é exposta no nível do formulário, que os desenvolvedores podem acessar usando $event.data nas regras.

Execute as seguintes etapas para escrever regras no editor de código para lidar com eventos de sucesso e erro.

1. Abra o formulário adaptável no modo de criação, selecione qualquer objeto de formulário e para abrir o editor de regras.
2. Selecionar Formulário na árvore Objetos de formulário e selecione Criar.
3. Selecionar Editor de código no menu suspenso de seleção de modo.
4. No editor de código, selecione Editar código. Selecionar Editar no diálogo de confirmação.
5. Escolher Envio bem-sucedido ou Erro no envio do Evento menu suspenso.
6. Escreva uma regra para o evento selecionado e selecione Concluído para salvar a regra.