Incorporar formulários adaptáveis com base nos componentes principais a uma página externa da Web embed-adaptive-form-in-external-web-page
Você pode incorporar formulários adaptáveis em uma página do AEM Sites ou uma página da Web hospedada fora do AEM. O formulário adaptável incorporado é totalmente funcional e os usuários podem preencher e enviar o formulário sem sair da página. Ele ajuda o usuário a permanecer no contexto de outros elementos na página da Web e interagir simultaneamente com o formulário.
Pré-requisitos prerequisites
Execute as seguintes etapas antes de incorporar um formulário adaptável a um site externo
- O Publish exibe o formulário adaptável a ser incorporado à instância de publicação do servidor do AEM Forms.
- Crie ou identifique uma página da Web no seu site para hospedar o formulário adaptável. Certifique-se de que a página da Web possa ler arquivos jQuery de um CDN ou tenha uma cópia local do jQuery incorporada. O jQuery é necessário para renderizar um formulário adaptável.
- Quando o servidor AEM e a página da Web estiverem em domínios diferentes, execute as etapas listadas na seção habilitar o AEM Forms para fornecer formulários adaptáveis a um site entre domínios.
Incorporar formulário adaptável embed-adaptive-form
Você pode incorporar um formulário adaptável inserindo algumas linhas de JavaScript na página da Web. A API no código envia uma solicitação HTTP ao servidor AEM para recursos de formulários adaptáveis e injeta o formulário adaptável no contêiner de formulários especificado.
Para incorporar o formulário adaptável:
-
Crie uma página da Web em seu site com o seguinte código:
code language-html <!doctype html> <html> <head> <title>This is the title of the webpage!</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="customafsection"/> <p>This section is replaced with the adaptive form.</p> <script> var options = {path:"/content/forms/af/myadaptiveform.html", CSS_Selector:".customafsection"}; alert(options.path); var loadAdaptiveForm = function(options){ //alert(options.path); if(options.path) { // options.path refers to the path of the adaptive form // For Example: /content/forms/af/ABC, where ABC is the adaptive form // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path var path = options.path; $.ajax({ url : path , type : "GET", data : { // wcmmode=disabled is only required for author instance // wcmmode : "disabled" }, async: false, success: function (data) { // If jquery is loaded, set the inner html of the container // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not evaluate the script tag in HTML as per the HTML5 spec // For example: document.getElementById().innerHTML if(window.$ && options.CSS_Selector){ // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the script tag. $(options.CSS_Selector).html(data); } }, error: function (data) { // any error handler } }); } else { if (typeof(console) !== "undefined") { console.log("Path of Adaptive Form not specified to loadAdaptiveForm"); } } }(options); </script> </body> </html>
-
No código incorporado:
- Altere o valor da variável options.path com o caminho da URL de publicação do formulário adaptável. Se o servidor AEM estiver sendo executado em um caminho de contexto, verifique se o URL inclui o caminho de contexto. Sempre mencione o nome completo do formulário adaptável, incluindo a extensão. Por exemplo, o código acima e o formulário adaptável residem no mesmo servidor de formulários AEM, portanto, o exemplo usa o caminho de contexto do formulário adaptável /content/forms/af/locbasic.html.
- CSS_Selector é o seletor de CSS do container de formulário no qual o formulário adaptável está incorporado. Por exemplo, a classe css .customafsection é o seletor de CSS no exemplo acima.
O formulário adaptável é incorporado na página da Web. Observe o seguinte no formulário adaptável incorporado:
- Rascunhos e formulários enviados estão disponíveis na guia Rascunhos e envios no Portal do Forms.
- A ação de envio configurada no formulário adaptável original é retida no formulário incorporado.
- As regras de formulário adaptáveis são mantidas e totalmente funcionais no formulário incorporado.
- O direcionamento de experiência e os testes A/B configurados no formulário adaptável original não funcionam no formulário incorporado.
- Se o Adobe Analytics estiver configurado no formulário original, os dados de análise serão capturados no servidor do Adobe Analytics. No entanto, não está disponível no relatório de análise do Forms.
- No Forms adaptável baseado em Componentes principais, as bibliotecas de clientes (ClientLibs) são incluídas e carregadas junto com os componentes Cabeçalho e Rodapé de um formulário. Assim, quando você incorpora um Forms adaptável baseado em Componentes principais a uma página da Web, ele sempre inclui o Cabeçalho e o Rodapé do formulário.
Topologia de exemplo sample-topology
A página externa da Web que incorpora o formulário adaptável envia solicitações para o servidor AEM, que normalmente fica atrás do firewall em uma rede privada. Para garantir que as solicitações sejam direcionadas com segurança ao servidor AEM, é recomendável configurar um servidor proxy reverso.
Vamos ver um exemplo de como você pode configurar um servidor proxy reverso do Apache 2.4 sem o dispatcher. Neste exemplo, você hospedará o servidor AEM com o caminho de contexto /forms
e mapeará /forms
para o proxy reverso. Ela garante que qualquer solicitação de /forms
no servidor Apache seja direcionada à instância do AEM. Essa topologia ajuda a reduzir o número de regras na camada do dispatcher, pois todas as solicitações recebem o prefixo /forms
de rota para o servidor AEM.
-
Abra o arquivo de configuração
httpd.conf
e remova o comentário das linhas de código a seguir. Como alternativa, você pode adicionar essas linhas de código no arquivo.code language-text LoadModule proxy_html_module modules/mod_proxy_html.so LoadModule proxy_http_module modules/mod_proxy_http.so
-
Configure regras de proxy adicionando as seguintes linhas de código no arquivo de configuração
httpd-proxy.conf
.code language-text ProxyPass /forms https://[AEM_Instance]/forms ProxyPassReverse /forms https://[AEM_Instance]/forms
Substitua
[AEM_Instance]
pela URL de publicação do servidor AEM nas regras.
Se você não montar o servidor AEM em um caminho de contexto, as regras de proxy na camada do Apache serão as seguintes:
ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json
ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content
Práticas recomendadas best-practices
Ao incorporar um formulário adaptável em uma página da Web, considere as seguintes práticas recomendadas:
- Certifique-se de que as regras de estilo definidas no CSS da página da Web não estejam em conflito com o CSS do objeto de formulário. Para evitar os conflitos, você pode reutilizar o CSS da página da Web no tema de formulário adaptável usando a biblioteca do cliente AEM. Para obter informações sobre como usar a biblioteca do cliente em temas de formulários adaptáveis, consulte Temas no AEM Forms.
- Faça com que o container do formulário na página da Web use toda a largura da janela. Ela garante que as regras CSS configuradas para dispositivos móveis funcionem sem alterações. Se o contêiner de formulário não ocupa toda a largura da janela, você precisa gravar CSS personalizado para fazer o formulário se adaptar a diferentes dispositivos móveis.
- Use a API
[getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html)
para obter a representação XML ou JSON dos dados de formulário no cliente. - Use a API
[unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html)
para descarregar o formulário adaptável do DOM do HTML. - Configurar o cabeçalho access-control-origin ao enviar uma resposta do servidor AEM.
Permitir que o AEM Forms forneça formulários adaptáveis a um site entre domínios cross-site
- Na instância de publicação do AEM, vá para AEM Web Console Configuration Manager em
https://'[server]:[port]'/system/console/configMgr
. - Localize e abra a configuração Filtro de referenciador Apache Sling.
- No campo Hosts permitidos, especifique o domínio em que reside a página da Web. Ela permite que o host faça solicitações de POST para o servidor AEM. Você também pode usar expressões regulares para especificar uma série de domínios de aplicativos externos.