Documentation AEM as a Cloud Service User Guide

Creating Form Fragments in Universal Editor

Last update: Mon Aug 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Applies to:
Experience Manager as a Cloud Service

Topics:
Edge Delivery Services

CREATED FOR:

Admin
User
Developer

Form fragments are reusable components that eliminate repetitive development work and ensure consistency across your organization’s forms. Instead of recreating common sections like contact information, address details, or consent agreements for every form, you can build these elements once as fragments and reuse them across multiple forms.

What you’ll accomplish in this article:

Understand the business value and technical capabilities of form fragments
Create reusable form fragments using Universal Editor
Integrate fragments into existing forms with proper configuration
Manage fragment lifecycle and maintain consistency across forms

Business benefits:

Reduced development time: Build common form sections once, reuse everywhere
Improved consistency: Standardized layouts and content across all forms
Simplified maintenance: Update a fragment once to reflect changes across all forms that use it
Enhanced compliance: Ensure regulatory sections remain consistent and up-to-date

Form fragments in Edge Delivery Services support advanced capabilities including nested fragments, multiple instances within a single form, and seamless integration with data sources.

Understanding Form Fragments

Form fragments in Edge Delivery Services provide powerful capabilities for modular form development:

Core capabilities:

Consistency management: Fragments maintain identical layouts and content across multiple forms. With a “change once, reflect everywhere” approach, updates to a fragment automatically apply to all forms in Preview mode.
Multiple usage: Add the same fragment multiple times within a single form, each with independent data binding to different data sources or schema elements.
Nested structures: Create complex hierarchies by embedding fragments within other fragments for sophisticated form architectures.

Technical requirements:

GitHub URL consistency: Both the fragment and any form using it must specify the same GitHub repository URL
Standalone editing: Fragments can only be modified in their standalone form; changes cannot be made within the host form

Publication behavior:

IMPORTANT

In Preview mode, fragment changes reflect immediately across all forms. In Publish mode, you must republish both the fragment and any forms that use it to see updates.

CAUTION

Avoid recursive fragment references (nesting a fragment within itself) as this causes rendering errors and unexpected behavior.

Prerequisites

Technical setup requirements:

GitHub repository configured with connection established between your AEM environment and GitHub repository
Latest Adaptive Forms block added to your GitHub repository (for existing Edge Delivery Services projects)
AEM Forms Author instance with Edge Delivery Services template available
Access to your AEM Forms as a Cloud Service author instance URL and GitHub repository URL

Required knowledge and permissions:

Basic understanding of form design concepts and component hierarchy
Familiarity with Universal Editor interface and form creation workflows
Author-level permissions in AEM Forms to create and manage form assets
Understanding of your organization’s form standards and reusable component requirements

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
Adding form fragments to a form
Managing form fragments

Creating form fragments

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

Log in to your AEM Forms as a Cloud Service author instance.
Select Adobe Experience Manager > Forms > Forms & Documents.
Click Create > Adaptive Form Fragment.

The Create Adaptive Form Fragment wizard appears.
Select the Edge Delivery Services based template from the Select Template tab and click Next.
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.
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.

(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 note
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, see Integrate forms with Form Data Model in Universal Editor.

(Optional) Specify the Publish Date or Unpublish Date for the fragment in the Advanced tab.
Click Create to generate the fragment. A success dialog appears with editing options.
Click Edit to open the fragment in Universal Editor with the default template applied.
Design your fragment content: Add form components (text fields, dropdowns, checkboxes) to build the reusable section. For detailed component guidance, see Getting Started with Edge Delivery Services for AEM Forms using Universal Editor.
Configure component properties: Set field names, validation rules, and default values as needed for your use case.
Save and preview: Save your fragment and use the Preview mode to verify the layout and functionality.

Validation checkpoint:

Fragment loads without errors in Universal Editor
All form components render correctly
Field properties and validation rules work as expected
Fragment is saved and available in the Forms & Documents console

Once your fragment is complete, you can integrate it into any Edge Delivery Services form.

Adding form fragments to a form

This example demonstrates creating an Employee Details form that uses the Contact Details fragment for both employee and supervisor information sections. This approach ensures consistent data collection while reducing development effort.

To integrate a form fragment into your form:

Open the form in edit mode.
Add the Form Fragment component to the form.
Open the Content browser, and navigate to the Adaptive Form component in the Content tree.
Navigate to the section, where you intend to add a fragment. For example, navigate to the Employee Details panel.
Click the Add icon and add the Form Fragment component from the Adaptive Form Components list.

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.
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.
Click Select.

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

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

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

Managing form fragments

You can perform several operations on form fragments using the AEM Forms user interface.

Log in to your AEM Forms as a Cloud Service author instance.
Select Adobe Experience Manager > Forms > Forms & Documents.

Select a form fragment and the toolbar displays the following operations you can perform on the selected fragment.

Manage fragment

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 html-authored no-header
Operation	Description
Edit	Opens the form fragment in edit mode.
Properties	Provides options to modify the properties of the form fragment.
Copy	Provides options to copy the form fragment and paste it at the desired location.
Preview	Provides options to preview the fragment as HTML or perform a custom preview by merging data from an XML file with the fragment.
Download	Downloads the selected fragment.
Start Review/Manage Review	Allows initiating and managing a review of the selected fragment.
Publish / Unpublish	Publishes / unpublishes the selected fragment.
Delete	Deletes the selected fragment.
Compare	Compares two different form fragments for previewing purposes.

Best Practices

Fragment design and naming:

Use descriptive, unique names: Choose names that clearly indicate the fragment’s purpose (e.g., “contact-details-with-validation” rather than “fragment1”)
Plan for reusability: Design fragments to be context-independent so they work across different form types
Keep fragments focused: Create single-purpose fragments rather than complex, multi-function components

Development workflow:

Test fragments independently: Verify fragment functionality before integrating into forms
Maintain consistent GitHub URLs: Ensure the same repository URL is used across all related fragments and forms
Document fragment purpose: Include clear descriptions and tags to help team members understand when to use each fragment

Publication and maintenance:

Coordinate publication: When updating fragments, plan to republish all dependent forms simultaneously
Version control: Use meaningful commit messages when updating fragments to track changes over time
Monitor dependencies: Keep track of which forms use each fragment to assess update impact

TIP

Fragment styles, scripts, and expressions are preserved when embedded, so design with this inheritance in mind.

Summary

You have successfully learned how to leverage form fragments in Edge Delivery Services to improve development efficiency and maintain consistency across your organization’s forms.

Key accomplishments:

Understanding: Grasped the business value and technical capabilities of form fragments
Creation: Built reusable form fragments using Universal Editor with proper configuration
Integration: Added fragments to forms with correct reference setup and property configuration
Management: Explored fragment lifecycle operations and maintenance workflows

Next steps:

Create a library of commonly used fragments for your organization
Establish naming conventions and governance policies for fragment usage
Explore advanced integration with Form Data Models for dynamic data-driven fragments
Implement fragment-based form templates for consistent user experiences

Your forms now benefit from modular, maintainable architecture that scales efficiently across projects while ensuring consistent user experiences.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab