Creating Form Fragments in Universal Editor

Last update: April 24, 2025

CREATED FOR:

  • Admin
  • User
  • Developer

This feature is available through the early access program. To request access, send an email with your GitHub organization name and repository name from your official address to aem-forms-ea@adobe.com . For example, if the repository URL is https://github.com/adobe/abc, the organization name is adobe and the repository name is abc.

This is a pre-release feature and accessible through our pre-release channel.

Forms often include common sections like contact information, identification details, or consent agreements. The form developers create these sections every time they build a new form, which is repetitive and time-consuming.
To eliminate this duplication of effort, Universal Editor provides a way to create reusable form segments, such as panels or groups of fields, just once and reuse them across various forms. These reusable, modular, and standalone segments are called form fragments. For example, the same emergency contact fragment can be used in different sections of a form, such as for employee and supervisor contact details.

By the end of the article, you learn how to create and use fragments in forms using the Universal Editor.

Features of Edge Delivery Services Form Fragments

  • Maintaining consistency with form fragments
    You can integrate fragments into different forms, helping you maintain consistent layouts and standardized content.

    NOTE
    With a “change once, reflect everywhere” approach, any update made to a fragment automatically applies to all forms at Preview mode. However, in the Publish mode, you must publish the fragment or republish the form for the changes to reflect.

  • Adding form fragments multiple times within form
    You can add a form fragment multiple times within a form and configure its data binding properties to data sources or schemas.

  • Using fragments within fragments
    You can create nested form fragments, which means you can add a fragment in another fragment, and can have nested fragment structure.

    NOTE
    You cannot nest a fragment within itself, as this can cause recursive references and unintended behavior, leading to errors or rendering issues.

Considerations while using Edge Delivery Services Form Fragments

  • You need to add the same GitHub URL in both the fragment and the form where you intend to use the fragment.
  • You cannot edit a form fragment within a form. To make changes, modify the standalone form fragment.

Prerequisites

  • Set up your GitHub repository to establish a connection between your AEM environment and the GitHub repository.
  • If you are already using Edge Delivery Services, add the latest version of the Adaptive Forms block to your GitHub repository.
  • The AEM Forms Author instance includes a template based on Edge Delivery Services.
  • Keep the URL of your AEM Forms as a Cloud Service author instance and your GitHub Repository handy.

Working with Edge Delivery Services Form Fragments

You can create Edge Delivery Services Form Fragments in the Universal Editor and add the created fragments to Edge Delivery Services forms. You can perform the following actions with Edge Delivery Services Form Fragments:

Creating form fragments

To create a form fragment in Universal Editor, perform the following steps:

  1. Login into your AEM Forms as a Cloud Service author instance.

  2. Select Adobe Experience Manager > Forms > Forms & Documents.

  3. Click Create > Adaptive Form Fragment.

    Create fragment

    The Create Adaptive Form Fragment wizard appears.

  4. Select the Egde Delivery Services based template from the Select Template tab and click Next.
    Select Edge Delivery Services template

  5. Specify title, name, description and tags for the fragment. Ensure that you specify a unique name for the fragment. If another fragment exists with the same name, the fragment fails to create.

  6. Specify the GitHub URL. For example, if your GitHub repository is named edsforms, it is located under the account wkndforms,the URL is https://github.com/wkndforms/edsforms.

    basic properties

  7. (Optional) Click to open the Form Model tab, and from the Select From drop-down menu, select one of the following models for the fragment:

    Displays model type in the Form Model tab

    • Form Data Model (FDM): Integrate data model objects and services from data sources into your fragment. Choose Form Data Model (FDM) if your form requires reading and writing data from multiple sources.

    • JSON Schema: Integrate your form with a backend system by associating a JSON schema that defines the data structure. It allows you to add dynamic content using the schema elements.

    • None: Specifies to create the fragment from scratch without using any form model.

    NOTE
    To learn how to integrate forms or fragments with a Form Data Model (FDM) in the Universal Editor to use diverse backend data sources, click here.

  8. (Optional) Specify the Publish Date or Unpublish Date for the fragment in the Advanced tab.

    Adavanced tab

  9. Click Create and a wizard appears.

    Edit fragment

  10. Click Edit and the created fragment with a default template opens in Universal Editor for authoring.

    Fragment in Univerasal Editor for authoring

    In edit mode, you can add any form components to the fragment. To learn how to create a fragment in the Universal Editor, refer to the Getting Started with Edge Delivery Services for AEM Forms using Universal Editor article.

    The below screenshot displays the contact fragment created in Universal Editor.

    Contact fragment

    Once you have created the fragment, you can add the created fragment in the Edge Delivery Services Forms.

Adding form fragments to a form

Let’s create a simple Employee Details form that includes both employee and supervisor information. You can use the Contact Details fragment in both the employee and supervisor panels. To use the form fragment in your form, perform the following steps:

  1. Open the form in edit mode.

  2. Add the Form Fragment component to the form.

  3. Open the Content browser, and navigate to the Adaptive Form component in the Content tree.

  4. Navigate to the section, where you intend to add a fragment. For example, navigate to the Employee Details panel.

    Navigate to section

  5. Click the Add icon and add the Form Fragment component from the Adaptive Form Components list.
    Add Form Fragment

    When you select the Form Fragment component, the fragment gets added to your form. You can configure the properties of the added fragment by opening its Properties. For example, hide the title of the fragment from its Properties.

    Configuring properties of fragment

  6. Select the Fragment reference in the Basic tab. All the fragments available for your form, depending on the model of the form, appear.

    For example, navigate to /content/forms/af and select the Contact Details fragment.

    Select Fragment

  7. Click Select.

    The form fragment is added by reference to the form and remains in synchronized with the standalone form fragment.

    Fragment in form

    You can preview the form to see how the form appears in the Preview mode.

    Preview

    Similarly, you can repeat Steps 3 to 7 to insert the Contact Details fragment for the Supervisor Details panel.

    Empoyee Details form