�۶���Ƶ

Prefill adaptive form fields prefill-adaptive-form-fields

�۶���Ƶ recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Introduction introduction

You can prefill the fields of an adaptive form using existing data. When a user opens a form, the values for those fields are prefilled. To prefill data in an adaptive form, make the user data available as a prefill XML / JSON in the format that adheres to prefill data structure of adaptive forms.

Structure of prefill data the-prefill-structure

An adaptive form can have mix of bound and unbound fields. Bound fields are fields which are dragged from the Content Finder tab and contain non-empty bindRef property value in the field edit dialog. Unbound fields are dragged directly from the component browser of Sidekick and have an empty bindRef value.

You can prefill both bound and unbound fields of an adaptive form. The prefill data contains the afBoundData and afUnBoundData sections to prefill both bound and unbound fields of an adaptive form. The afBoundData section contains the prefill data for bound fields and panels. This data must be compliant with the associated form model schema:

Sample Prefill XML structure 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>

Sample Prefill JSON structure sample-prefill-json-structure

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

For bound fields with same bindref or unbound fields with same name, data specified in the XML tag or JSON object is filled in all the fields. For example, two fields in a form are mapped to the name textbox in the prefill data. During runtime, if the first text box field contains “A”, then “A” is automatically filled in the second text box. This linking is called live linking of adaptive form fields.

Adaptive form using XFA form template xfa-based-af

The structure of prefill XML and the submitted XML for XFA-based adaptive forms is as follows:

Prefill-Submit-Data-ContentPackage.zip

Get File
Sample containing prefill data and submitted data

XML schema-based adaptive forms  xml-schema-af

The structure of prefill XML and submitted XML for adaptive forms based on XML schema is as follows:

<?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>

For fields whose model is XML schema, the data is prefilled in the afBoundData tag as shown in the sample XML below. It can be used for prefilling an adaptive form with one or more unbound text fields.

<?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>

An example without afData and 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>

JSON schema-based adaptive forms json-schema-based-adaptive-forms

For adaptive forms based on JSON schema, the structure of prefill JSON and submitted JSON is described below. For more information, see Creating adaptive forms using JSON schema.

{
    "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"
}}}}}

For fields which use JSON schema model, the data is prefilled in the afBoundData object as shown in the sample JSON below. It can be used for prefilling an adaptive form with one or more unbound text fields. Below is an example of data with afData/afBoundData wrapper:

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

Below is an example without afData/afBoundData wrapper:

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

Adaptive Form with no form model adaptive-form-with-no-form-model

For adaptive forms with no form model, the data for all the fields is under the <data> tag of <afUnboundData> tag.

Also, take note of the following:

The XML tags for the user data submitted for various fields are generated using the name of the fields. Therefore, the field names must be unique.

<?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>

Configuring prefill service using Configuration Manager configuring-prefill-service-using-configuration-manager

To enable prefill service, specify the Default Prefill Service Configuration in the AEM Web Console Configuration. Use the following steps to configure the Prefill service:

The curious case of repeatable panels the-curious-case-of-repeatable-panels

Generally, bound (form schema) and unbound fields are authored in the same adaptive form, but the following are a few exceptions in case the bound are repeatable:

Supported protocols for prefilling user data supported-protocols-for-prefilling-user-data

Adaptive forms can be prefilled with user data in prefill data format via the following protocols when configured with valid regex:

The crx:// protocol the-crx-protocol

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

The specified node must have a property called jcr:data and hold the data.

The file:// protocol  the-file-protocol-nbsp

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

The referred file must be on the same server.

The https:// protocol the-http-protocol

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

The service:// protocol the-service-protocol

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

Setting data attribute in slingRequest setting-data-attribute-in-slingrequest

You can also set the data attribute in slingRequest, where the data attribute is a string containing XML or JSON, as shown in the sample code below (Example is for 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);
%>

You can write a simple XML or JSON string containing all your data and set it in slingRequest. This can easily be done in your renderer JSP for any component, which you want to include in the page where you can set the slingRequest data attribute.

For example, where you want a specific design for your page with a specific type of header. To achieve this, you can write your own header.jsp, which you can include in your page component and set the data attribute.

Another good example is a use case where you would like to prefill data on login through social accounts like Facebook, Twitter, or LinkedIn. In this case, you can include a simple JSP in header.jsp, which fetches data from the user account and sets the data parameter.

prefill-page component.zip

Get File
Sample prefill.jsp in page component

AEM Forms custom prefill service aem-forms-custom-prefill-service

You can use custom prefill service for the scenarios, where you constantly read data from a pre-defined source. The prefill service reads data from defined data sources and prefills the fields of the adaptive form with the content of the prefill data file. It also helps you permanently associate prefilled data with an adaptive form.

Create and run a prefill service create-and-run-a-prefill-service

The prefill service is an OSGi service and is packaged through OSGi bundle. You create the OSGi bundle, upload, and install it to AEM Forms bundles. Before you get started with creating the bundle:

Get File

Create a prefill service create-a-prefill-service

The boilerplate package (sample prefill service package) contains sample implementation of AEM Forms prefill service. Open the boilerplate package in a code editor. For example, open the boilerplate project in Eclipse for editing. After you open the boilerplate package in a code editor, perform the following steps to create the service.

Start and use the prefill service start-and-use-the-prefill-service

To start the prefill service, upload the JAR file to AEM Forms Web Console, and activate the service. Now, the service starts appearing in adaptive forms editor. To associate a prefill service to an adaptive form:

Prepopulate data at client prefill-at-client

When you prefill an adaptive form, the AEM Forms server merges data with an adaptive form and delivers the filled form to you. By default, the data merge action takes place at the server.

You can configure the AEM Forms server to perform the data merge action at the client instead of the server. It significantly reduces the time required to prefill and render adaptive forms. By default, the feature is disabled. You can enable it from the Configuration Manager or command line.