Gerar visualização de HTML5 de um formulário XDP

Ao criar um formulário no AEM Forms Designer, além de visualizar a representação em PDF de um formulário, também é possível visualizar uma representação em HTML. Você pode usar o Visualizar HTML para visualizar um formulário da forma que apareceria em um navegador.

Habilitar Visualização de HTML para formulários XDP no Designer

Para permitir que o Designer gere a pré-visualização de HTML de formulários XDP, execute as seguintes configurações:

  • Configurar o serviço de autenticação do Apache Sling
  • Desativar modo protegido
  • Fornecer detalhes do servidor do AEM Forms

Configurar o serviço de autenticação do Apache Sling

  1. Ir para https://'[server]:[port]'/system/console/configMgr no AEM Forms executado no OSGi ou
    https://'[server]:[port]'/lc/system/console/configMgr no AEM Forms em execução no JEE.

  2. Localize e clique em Serviço de autenticação Apache Sling configuração para abri-lo no modo de edição.

  3. Dependendo de você estar executando o AEM Forms no OSGi ou no JEE, adicione o seguinte no Requisitos de autenticação campo:

    • AEM Forms no JEE

      • -/content/xfaforms
      • -/etc/clientlibs

    • AEM Forms no OSGi

      • -/content/xfaforms
      • -/etc/clientlibs/fd/xfaforms
    OBSERVAÇÃO

    Não copie e cole o valor especificado no campo Requisitos de autenticação, pois ele pode corromper os caracteres especiais no valor. Em vez disso, digite o valor especificado no campo.

  4. Especifique um nome de usuário e senha no Nome de usuário anônimo e Senha de usuário anônimo campos, respectivamente. As credenciais especificadas são usadas para manipular a autenticação anônima e permitir acesso a usuários anônimos.

  5. Clique em Salvar para salvar a configuração.

Desativar modo protegido

A variável modo protegido está ativado, por padrão. Mantenha-o ativado para os ambientes de produção. Você pode desativá-lo para que um ambiente de desenvolvimento pré-visualize o HTML5 Forms no designer. Execute as seguintes etapas para desativá-la:

  1. Faça logon no AEM Web Console como administrador.

    • O URL do AEM Forms no OSGi é https://'[server]:[port]'/system/console/configMgr
    • O URL do AEM Forms no JEE é https://'[server]:[port]'/lc/system/console/configMgr

  2. Abertura Configurações do Forms Mobile para edição.

  3. Desmarque a opção Modo protegido e clique em Salvar.

Fornecer detalhes do servidor do AEM Forms

  1. No Designer, acesse Ferramentas > Opções.

  2. Na janela Opções, selecione Opções de servidor forneça os seguintes detalhes e clique em OK.

    • URL do servidor: URL do servidor do AEM Forms.

    • Número da porta HTTP: Porta do servidor AEM. O valor padrão é 4502.

    • Contexto de visualização do HTML: Caminho do perfil para renderização de formulários XFA. Os perfis padrão a seguir são usados para visualizar o formulário no Designer. Entretanto, também é possível especificar o caminho para um perfil personalizado.

      • /content/xfaforms/profiles/default.html (AEM Forms no OSGi)

      • /lc/content/xfaforms/profiles/default.html (AEM Forms no JEE)

    • Contexto do Forms Manager: Caminho de contexto no qual a interface do usuário do Forms Manager é implantada. Os valores padrão são:

      • /aem/forms (AEM Forms no OSGi)
      • /lc/forms (AEM Forms no JEE)
    OBSERVAÇÃO

    Verifique se o servidor do AEM Forms está ativo e em execução. A visualização do HTML se conecta ao servidor CRX para gerar uma visualização.

    Opções do AEM Forms Designer

    Opções do AEM Forms Designer

  3. Para visualizar um formulário no HTML, clique no link Visualizar HTML guia.

    OBSERVAÇÃO
    • Se a guia HTML Preview for fechada, pressione F4 para abrir a guia Preview HTML. Você também pode selecionar Visualizar HTML no menu Exibir para abrir a guia Visualizar HTML.
      • A visualização de HTML não é compatível com documentos de PDF, a visualização de HTML é somente para documentos XDP.
    ATENÇÃO

    Para testar a experiência real do usuário final, visualize seus formulários em navegadores externos (Google Chrome, Microsoft Edge, Mozilla Firefox e muito mais) também. Todo navegador usa um mecanismo separado para renderizar o HTML, de modo que pode haver algumas diferenças na maneira como um formulário é visualizado no Designer e no navegador externo.

Para visualizar um formulário usando dados de amostra

O Designer permite visualizar e testar o formulário usando dados XML de amostra. É recomendável testar frequentemente seu formulário com dados de amostra para garantir que ele seja renderizado corretamente.

Se você não tiver dados de amostra, o Designer poderá criá-los ou você mesmo poderá criá-los. (Consulte Gerar automaticamente dados de amostra para pré-visualizar o formulário e Para criar dados de amostra para visualizar seu formulário.)

Testar o formulário usando uma fonte de dados de amostra garante que os dados e campos sejam mapeados e que os subformulários de repetição sejam repetidos conforme esperado. Você pode criar um layout de formulário equilibrado que forneça o espaço apropriado para cada objeto exibir os dados mesclados.

  1. Selecionar Arquivo > Propriedades do formulário.

  2. Clique em Visualizar e, na caixa Arquivo de dados, digite o caminho completo para o arquivo de dados de teste. Você também pode usar o botão Procurar para navegar até o arquivo.

  3. Clique em OK. Na próxima vez que você visualizar o formulário no Visualizar HTML , os valores de dados do arquivo XML de amostra aparecerão nos respectivos objetos.

Visualizar formulários localizados em um repositório

No AEM Forms, é possível visualizar formulários e documentos em um repositório. A Pré-visualização ajuda a saber exatamente como os formulários são exibidos e se comportam conforme serão usados pelos usuários finais.

Nesta página