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:
-
Login into 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 accountwkndforms
,the URL ishttps://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:
-
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. -
-
(Optional) Specify the Publish Date or Unpublish Date for the fragment in the Advanced tab.
-
Click Create and a wizard appears.
-
Click Edit and the created fragment with a default template opens in Universal 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.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:
-
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 theContact Details
fragment. -
Click Select.
The form fragment is added by reference to the form and remains in 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 theSupervisor Details
panel.
Managing form fragments
You can perform several operations on form fragments using the AEM Forms user interface.
-
Login into 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.