Create an adaptive form using a set of adaptive forms

Last update: June 24, 2024

CREATED FOR:

  • User
  • Developer

Adobe 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.

Overview

In a workflow, such as an application for opening a bank account, your users fill multiple forms. Instead of asking them to fill a set of forms, you can stack the forms together and build a large form (parent form). When you add an adaptive form to the larger form, it is added as a panel (child form). You add a set of child forms to create a parent form. You can show or hide panels based on user input. Buttons of the parent form, such as submit and reset, overwrite the buttons of the child form. To add an adaptive form in the parent form, you can drag-drop the adaptive form from the asset browser (like adaptive form fragments).

Features available are:

  • Independent authoring
  • Showing/hiding appropriate forms
  • Lazy loading

Features like independent authoring and lazy loading provide performance improvements over using individual components to create the parent form.

NOTE
You cannot use XFA-based adaptive forms/fragments as child or parent forms.

Behind the scenes

You can add XSD-based adaptive forms and fragments in the parent form. The structure of the parent form is same as any adaptive form. When you add an adaptive form as a child form, it is added as a panel in the parent form. Data of a bound child form is stored under the dataroot of the afBoundData section of the parent form’s XML schema.

For example, your customers fill an application form. First two fields of the form are name and identity. Its XML is:

<afData>
    <afUnboundData>
        <data />
    </afUnboundData>
    <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/">
            <applicantName>Sarah Rose</applicantName>
            <applicantId>1234</applicantId>
        </data>
    </afBoundData>
</afData>

You add another form in the application that lets your customers fill their office address. The schema root of the child form is officeAddress. Apply bindref /application/officeAddress or /officeAddress. If bindrefis not provided, the child form is added as the officeAddress subtree. See the XML of the form below:

<afData>
    <afUnboundData>
        <data />
    </afUnboundData>
    <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/">
            <applicantName>Sarah Rose</applicantName>
            <applicantId>1234</applicantId>
            <officeAddress>
                <addressLine>1, Geometrixx City</addressLine>
                <zip>11111</zip>
            </officeAddress>
        </data>
    </afBoundData>
</afData>

If you insert another form that lets your customers provide house address, apply bindref /application/houseAddress or /houseAddress.The XML looks like:

<afData>
    <afUnboundData>
        <data />
    </afUnboundData>
    <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/">
            <applicantName>Sarah Rose</applicantName>
            <applicantId>1234</applicantId>
            <officeAddress>
                <addressLine>1, Geometrixx City</addressLine>
                <zip>11111</zip>
            </officeAddress>
            <houseAddress>
                <addressLine>2, Geometrixx City</addressLine>
                <zip>11111</zip>
            </houseAddress>
        </data>
    </afBoundData>
</afData>

If you want to keep the same subroot name as the schema root ( Addressin this example), use indexed bindrefs.

For example, apply bindrefs /application/address[1] or /address[1] and /application/address[2] or /address[2]. The XML of the form is:

<afData>
    <afUnboundData>
        <data />
    </afUnboundData>
    <afBoundData>
        <data xmlns:xfa="https://www.xfa.org/schema/xfa-data/1.0/">
            <applicantName>Sarah Rose</applicantName>
            <applicantId>1234</applicantId>
            <address>
                <addressLine>1, Geometrixx City</addressLine>
                <zip>11111</zip>
            </address>
            <address>
                <addressLine>2, Geometrixx City</addressLine>
                <zip>11111</zip>
            </address>
        </data>
    </afBoundData>
</afData>

You can change the default subtree of the adaptive form/fragment using the bindRef property. The bindRef property lets you specify the path that points to a location in the tree structure of the XML schema.

If the child form is unbound, its data is stored under the dataroot of the afUnboundData section of the parent form’s XML schema.

You can add an adaptive form as a child form multiple times. Ensure that the bindRef is modified properly so that each used instance of the adaptive form points to a different subroot under the data root.

NOTE
If different forms/fragments are mapped to same subroot, data gets overwritten.

Adding an adaptive form as a child form using asset browser

Perform the following steps to add an adaptive form as a child form using asset browser.

  1. Open the parent form in edit mode.

  2. In the sidebar, click Assets assets-browser . Under Assets, select Adaptive Form from the drop-down.
    Selecting adaptive form under Assets

  3. Drag-drop the adaptive form you want to add as a child form.
    Drag-drop the adaptive form in your site The adaptive form you drop is added as a child form.

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

The True Cost of a Failed Implementation

Online | Session | General Audience

A failed implementation isn’t just an inconvenience — it costs real revenue. Poor execution and misaligned tools disrupt pipelines,...

Wed, Mar 19, 2:00 PM PDT (9:00 PM UTC)

Register

The Future of Forms: Experience Success Across the Enrollment Journey

Online | Session | General Audience

Adobe Experience Manager Forms is the conversion engine to fully capitalize on engagement and personalization efforts, yet it’s frequently...

Wed, Mar 19, 2:00 PM PDT (9:00 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now