Preencher previamente campos de formulário adaptável prefill-adaptive-form-fields

O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o 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.

Introdução introduction

É possível preencher previamente os campos de um formulário adaptável usando dados existentes. Quando um usuário abre um formulário, os valores desses campos são preenchidos previamente. Para preencher previamente os dados em um formulário adaptável, disponibilize os dados do usuário como um XML/JSON de preenchimento prévio no formato que segue a estrutura de dados de formulários adaptáveis de preenchimento prévio.

Estrutura dos dados de preenchimento prévio the-prefill-structure

Um formulário adaptável pode ter uma combinação de campos vinculados e não vinculados. Os campos associados são campos que são arrastados da guia Localizador de conteúdo e contêm o valor da propriedade bindRef não vazio na caixa de diálogo de edição de campo. Os campos não vinculados são arrastados diretamente do navegador de componentes do Sidekick e têm um valor bindRef vazio.

É possível preencher previamente os campos vinculados e não vinculados de um formulário adaptável. Os dados de pré-preenchimento contêm as seções afBoundData e afUnBoundData para preencher previamente os campos ligados e não vinculados de um formulário adaptável. A seção afBoundData contém os dados de preenchimento prévio para campos e painéis associados. Esses dados devem ser compatíveis com o schema do modelo de formulário associado:

Exemplo de estrutura XML de preenchimento prévio sample-prefill-xml-structure

<?xml version="1.0" encoding="UTF-8"?>
<afData>
  <afBoundData>
     <employeeData>
        .
     </employeeData>
  </afBoundData>

  <afUnboundData>
    <data>
      <textbox>Hello World</textbox>
         .
         .
      <numericbox>12</numericbox>
         .
         .
    </data>
  </afUnboundData>
</afData>

Exemplo de estrutura JSON de preenchimento prévio sample-prefill-json-structure

{
   "afBoundData": {
      "employeeData": { }
   },
   "afUnboundData": {
      "data": {
         "textbox": "Hello World",
         "numericbox": "12"
      }
   }
}

Para campos vinculados com o mesmo vínculo ou campos não vinculados com o mesmo nome, os dados especificados na tag XML ou no objeto JSON são preenchidos em todos os campos. Por exemplo, dois campos em um formulário são mapeados para o nome textbox nos dados de preenchimento prévio. Durante o tempo de execução, se o primeiro campo da caixa de texto contiver "A", então "A" será automaticamente preenchido na segunda caixa de texto. Esse vínculo é chamado de vínculo ao vivo de campos de formulário adaptáveis.

Formulário adaptável usando modelo de formulário XFA xfa-based-af

A estrutura do XML pré-preenchido e do XML enviado para formulários adaptáveis baseados em XFA é a seguinte:

Prefill-Submit-Data-ContentPackage.zip

Obter arquivo
Amostra contendo dados de preenchimento prévio e dados enviados

Formulários adaptáveis baseados em esquema XML  xml-schema-af

A estrutura do XML pré-preenchido e do XML enviado para formulários adaptáveis com base no esquema XML é a seguinte:

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema targetNamespace="https://adobe.com/sample.xsd"
            xmlns="https://adobe.com/sample.xsd"
            xmlns:xs="https://www.w3.org/2001/XMLSchema">

    <xs:element name="sample" type="SampleType"/>

    <xs:complexType name="SampleType">
        <xs:sequence>
            <xs:element name="noOfProjectsAssigned" type="xs:string"/>
        </xs:sequence>
    </xs:complexType>
</xs:schema>

Para campos cujo modelo é um esquema XML, os dados são pré-preenchidos na marca afBoundData, como mostrado na amostra XML abaixo. Ele pode ser usado para preencher previamente um formulário adaptável com um ou mais campos de texto não vinculados.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <textbox>Ignorance is bliss :) </textbox>
    </data>
  </afUnboundData>
  <afBoundData>
    <data>
      <noOfProjectsAssigned>twelve</noOfProjectsAssigned>
    </data>
  </afBoundData>
</afData>

Um exemplo sem afData e afBoundData wrapper an-example-without-afdata-and-afbounddata-wrapper

<?xml version="1.0" encoding="UTF-8"?><config>
 <assignmentDetails descriptionOfAssignment="Some Science Project" durationOfAssignment="34" financeRelatedProject="1" name="Lisa" numberOfMentees="1"/>
 <assignmentDetails descriptionOfAssignment="Kidding, right?" durationOfAssignment="4" financeRelatedProject="1" name="House" numberOfMentees="3"/>
</config>

Formulários adaptáveis baseados em esquema JSON json-schema-based-adaptive-forms

Para formulários adaptáveis com base no esquema JSON, a estrutura do JSON de preenchimento prévio e do JSON enviado é descrita abaixo. Para obter mais informações, consulte Criação de formulários adaptáveis usando o esquema JSON.

{
    "id": "https://some.site.somewhere/entry-schema#",
    "$schema": "https://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "address": {
            "type": "object",
            "properties": {
    "name": {
     "type": "string"
    },
    "age": {
     "type": "integer"
}}}}}

Para campos que usam o modelo de esquema JSON, os dados são pré-preenchidos no objeto afBoundData, como mostrado na amostra JSON abaixo. Ele pode ser usado para preencher previamente um formulário adaptável com um ou mais campos de texto não vinculados. Veja abaixo um exemplo de dados com o wrapper afData/afBoundData:

{
  "afData": {
    "afUnboundData": {
      "data": { "textbox": "Ignorance is bliss :) " }
    },
    "afBoundData": {
      "data": { {
   "user": {
    "address": {
     "city": "Noida",
     "country": "India"
}}}}}}}

Veja abaixo um exemplo sem o afData/afBoundData wrapper:

{
 "user": {
  "address": {
   "city": "Noida",
   "country": "India"
}}}

Formulário adaptável sem modelo de formulário adaptive-form-with-no-form-model

Para formulários adaptáveis sem modelo de formulário, os dados de todos os campos estão sob a marca <data> de <afUnboundData> tag.

Além disso, tome nota do seguinte:

As tags XML para os dados do usuário enviados para vários campos são geradas usando o nome dos campos. Portanto, os nomes dos campos devem ser exclusivos.

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
      <radiobutton>2</radiobutton>
      <repeatable_panel_no_form_model>
        <numericbox>12</numericbox>
      </repeatable_panel_no_form_model>
      <repeatable_panel_no_form_model>
        <numericbox>21</numericbox>
      </repeatable_panel_no_form_model>
      <checkbox>2</checkbox>
      <textbox>Nopes</textbox>
    </data>
  </afUnboundData>
  <afBoundData/>
</afData>

Configuração do serviço de preenchimento prévio usando o Gerenciador de configurações configuring-prefill-service-using-configuration-manager

Para ativar o serviço de preenchimento prévio, especifique a Configuração do serviço de preenchimento prévio padrão na Configuração do console da Web AEM. Use as seguintes etapas para configurar o serviço de Preenchimento prévio:

O caso curioso de painéis repetíveis the-curious-case-of-repeatable-panels

Geralmente, os campos vinculados (esquema de formulário) e não vinculados são criados no mesmo formulário adaptável, mas as exceções a seguir são algumas caso os campos vinculados sejam repetíveis:

Protocolos compatíveis com o preenchimento prévio de dados do usuário supported-protocols-for-prefilling-user-data

Os formulários adaptáveis podem ser pré-preenchidos com dados do usuário no formato de dados de preenchimento prévio por meio dos seguintes protocolos quando configurados com regex válido:

O protocolo crx:// the-crx-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=crx:///tmp/fd/af/myassets/sample.xml

O nó especificado deve ter uma propriedade chamada jcr:data e conter os dados.

O protocolo file://  the-file-protocol-nbsp

https://localhost:4502/content/forms/af/someAF.html?wcmmode=disabled&dataRef=file:///C:/Users/form-user/Downloads/somesamplexml.xml

O arquivo referenciado deve estar no mesmo servidor.

O protocolo https:// the-http-protocol

https://localhost:4502/content/forms/af/xml.html?wcmmode=disabled&dataRef=https://localhost:8000/somesamplexmlfile.xml

O protocolo service:// the-service-protocol

https://localhost:4502/content/forms/af/abc.html?wcmmode=disabled&dataRef=service://[SERVICE_NAME]/[IDENTIFIER]

Definição do atributo de dados em slingRequest setting-data-attribute-in-slingrequest

Você também pode definir o atributo data em slingRequest, onde o atributo data é uma cadeia de caracteres que contém XML ou JSON, conforme mostrado no código de exemplo abaixo (O exemplo é para XML):

<%
           String dataXML="<afData>" +
                            "<afUnboundData>" +
                                "<data>" +
                                    "<first_name>"+ "Tyler" + "</first_name>" +
                                    "<last_name>"+ "Durden " + "</last_name>" +
                                    "<gender>"+ "Male" + "</gender>" +
                                    "<location>"+ "Texas" + "</location>" +
                                    "</data>" +
                            "</afUnboundData>" +
                        "</afData>";
        slingRequest.setAttribute("data", dataXML);
%>

Você pode gravar uma sequência XML ou JSON simples contendo todos os seus dados e defini-la em slingRequest. Isso pode ser feito facilmente no JSP do renderizador para qualquer componente, que você deseja incluir na página, onde é possível definir o atributo de dados slingRequest.

Por exemplo, quando você deseja um design específico para a página com um tipo específico de cabeçalho. Para isso, você pode escrever seu próprio header.jsp, que pode ser incluído no componente de página e definir o atributo data.

Outro bom exemplo é um caso de uso em que você deseja preencher previamente os dados ao fazer logon por meio de contas sociais como Facebook, Twitter ou LinkedIn. Nesse caso, você pode incluir um JSP simples em header.jsp, que busca dados da conta de usuário e define o parâmetro de dados.

prefill-page component.zip

Obter arquivo
Amostra de prefill.jsp no componente Página

Serviço de preenchimento prévio personalizado do AEM Forms aem-forms-custom-prefill-service

Você pode usar o serviço de preenchimento prévio personalizado para os cenários, em que lê constantemente os dados de uma fonte predefinida. O serviço de preenchimento prévio lê os dados de fontes de dados definidas e preenche os campos do formulário adaptável com o conteúdo do arquivo de dados de preenchimento prévio. Também ajuda a associar permanentemente os dados pré-preenchidos a um formulário adaptável.

Criar e executar um serviço de preenchimento prévio create-and-run-a-prefill-service

O serviço de pré-preenchimento é um serviço OSGi e é empacotado por meio do pacote OSGi. Crie o pacote OSGi, faça upload e instale-o nos pacotes do AEM Forms. Antes de começar a criar o pacote:

Obter arquivo

Criar um serviço de preenchimento create-a-prefill-service

O pacote padrão (pacote de serviço de preenchimento de amostra) contém uma implementação de amostra do serviço de preenchimento prévio do AEM Forms. Abra o pacote padrão em um editor de código. Por exemplo, abra o projeto padronizado no Eclipse para edição. Depois de abrir o pacote padrão em um editor de código, execute as etapas a seguir para criar o serviço.

Iniciar e usar o serviço de preenchimento prévio start-and-use-the-prefill-service

Para iniciar o serviço de preenchimento prévio, faça upload do arquivo JAR para o Console da Web do AEM Forms e ative o serviço. Agora, o serviço começa a aparecer no editor de formulários adaptáveis. Para associar um serviço de preenchimento prévio a um formulário adaptável:

Preencher dados previamente no cliente prefill-at-client

Ao preencher previamente um formulário adaptável, o servidor do AEM Forms mescla os dados com um formulário adaptável e entrega o formulário preenchido a você. Por padrão, a ação de mesclagem de dados ocorre no servidor.

Você pode configurar o servidor do AEM Forms para executar a ação de mesclagem de dados no cliente em vez do servidor. Ele reduz bastante o tempo necessário para preencher previamente e renderizar formulários adaptáveis. Por padrão, o recurso está desativado. Você pode habilitá-lo no Gerenciador de configurações ou na linha de comando.