Documentation AEM as a Cloud Service User Guide

Create forms with repeatable sections (Core Components) repeat-panel

Last update: Fri Jun 21 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Developer
Admin
User

Version

Article link

AEM 6.5

Click here

AEM as a Cloud Service

This article

A repeatable section refers to a part of a form that can be duplicated or repeated multiple times to collect information for multiple instances of the same data.

For example, consider a form used to collect information about a person’s work experience. You may have a repeatable section for capturing details of each previous job. The repeatable section would typically contain fields such as company name, job title, dates of employment, and job responsibilities. The user can add multiple instances of the repeatable section to enter information about each job they have held.

Repeatability

By the end of this article, you learn to:

Create a repeatable section in an Adaptive Form
Set minimum or maximum number of repetitions for an Adaptive Form component
Use rule editor to configure addition or deletion actions for repeatable sections

You can use the Panel, Accordion, Horizontal Tabs, Vertical Tabs or Wizard components to make sections of an Adaptive Form repeatable. You can add child components to these components to create repeatable section in a form.

Examples in this document are based on the Panel component. You can perform the identical steps to make the Panel, Accordion, Horizontal Tabs, Vertical Tabs or Wizard components repeatable.

Add or delete repeatable sections in a form add-or-delete-repeatable-section-in-panel-container

To repeat a panel in the form or remove repeatable panels, a form author uses a button component to add or remove instance of the panel. To add or delete repeatable sections (panels) in a form:

Make panel container repeatable
Add repeatable section
Delete repeatable sections

Make Panel Container repeatable make-panel-container-repeatable

Accessibility tab

To make a panel repeatable, perform the following steps:

Select a panel container and select .
Click the repeat panel and switch on the toggle to make panel repeatable.
Set minimum repetitions as required for minimum repeatable sections, you can set minimum repetitions to zero for non-repition of panels or to remove the repeated panels. By default the value of minimum repetition is zero.

Set maximum repetitions to repeat the panel number of times required, by default the value is infinite.

note note
NOTE
Minimum repetition cannot be -ve value. To create a non-repeatable panel, set value of the maximum and minimum field to one.

Add repeatable section using instance manager (via scripts) add-repeatable-section-using-instance-manager-via-scripts

The parent of the panel which is to be repeated, should contain an add button to manage repeat instance of the panel. Perform the following steps to insert buttons to the parent and enable scripts on the buttons:

Add a button component to the parent of the panel. In the example video below, a button component with the label name Add and field name AddPanel, is used. Select the component and select . The rules of the button component open in the rule editor.
In the Rule Editor window, click Create.

Select Visual Editor in the Form Objects and Functions row.
1. In the rule area, under WHEN, select state is clicked.
2. Under THEN, select Add Instance, and drag-drop the panel using or select it using Drop object or select here.
Select Code Editor in the Form Objects and Functions row. Click Edit Rules and in the code area:
- To create an add panel button, specify this.panel.instanceManager.addInstance()
Click Done.

https://video.tv.adobe.com/v/3421052/adaptive-forms-repeatable-sections-repeat-sections/?quality=12&learn=on

Delete repeatable sections using instance manager (via scripts) delete-repeatable-section-using-instance-manager-via-scripts

The parent of the panel should contain a delete button to delete instance of the repeatable panels. Perform the following steps to insert buttons to the parent and enable scripts on the buttons to delete repeatable panels:

Add a button component to the parent of the panel, In the video below, a button component with the label name delete and field name DeletePanel is used. Select the component and select . The rules of the button component open in the rule editor.
In the Rule Editor window, click Create.

Select Visual Editor in the Form Objects and Functions row.
1. In the rule area, under WHEN DeletePanel, select state is clicked.
2. Under THEN, select Remove Instance, and drag-drop the panel using or select it using Drop object or select here.
Select Code Editor in the Form Objects and Functions row. Click Edit Rules and in the code area:
- To create a delete panel button, specify this.panel.instanceManager.removeInstance(this.panel.instanceIndex)
Click Done.

https://video.tv.adobe.com/v/3421620/adaptive-forms-repeatable-sections

NOTE

If a field belongs to a repeatable panel, you cannot access it directly using its name in your scripts. To access the field, specify the repeatable instance to which the field belongs using the instances API in InstanceManager. The syntax to use the instances API in InstanceManager is:

<panelName>.instanceManager.instances[<instanceNumber>].<fieldname>

For example, you create an adaptive form with a repeatable panel having a text box. When you pre-fill the form with three repeatable text boxes, you need the xml below:

<panel1><textbox1>AA1</panel1></textbox1>

<panel1><textbox1>AA2</panel1></textbox1>

<panel1><textbox1>AA3</panel1></textbox1>

To read AA1 data, specify:

Panel1.instanceManager.instances[0].textbox.value

To read AA2 data, specify:

Panel1.instanceManager.instances[1].textbox.value

NOTE

When all instances of a panel are removed from an adaptive form, to add an instance of the removed panel, use the _panelName syntax to capture the instance manager of the panel and the use the addInstance API of instance manager to add the deleted instance. For example, _panelName.addInstance(). It adds an instance of the removed panel.

Using repeating subforms from Form Template (XDP/XSD) using-repeating-subforms-from-form-template-xdp-xsd

Repeatable subform is similar to the repeatable panels in Adaptive Forms. In AEM Forms Designer, perform the following steps to create a repeating subform:

In the Hierarchy palette, select the parent subform of the subform you want to repeat.
In the Object palette, click the Subform tab, and in the Content list, select Flowed.
Select the subform to repeat.
In the Object palette, click the Subform tab and, in the Content list, select either Positioned or Flowed.
Click the Binding tab and select Repeat Subform For Each Data Item.
To specify the minimum number of repetitions, select Min Count and type a number in the associated box. If this option is set to 0 and no data is provided for the objects in the subform at data-merge time, the subform is not placed when the form is rendered.
To specify the maximum number of subform repetitions, select Max and type a number in the associated box. If you do not specify a value in the Max box, the number of subform repetitions are unlimited.
To specify a set number of subform repetitions, regardless of the quantity of data, select Initial Count and type a number in the associated box. If you select this option and either no data is available or fewer data entries exist than the specified Initial Count value, empty instances of the subform are still placed on the form.
Add two buttons in the parent subform- one for adding instance and another for deleting instance of repeatable subform. For detailed steps, see Build an action.
Now, link the Form Template to the Adaptive form. For detailed steps, see Create an adaptive form based on a template.
Use the buttons created in step 9 to add and remove subforms.

Attached .zip file contains a sample repeatable sub form.

Get File

Using repeat settings of an XML Schema (XSD) using-repeat-settings-of-an-xml-schema-xsd-br

You can create repeatable panels from an XML Schema and from the minOccours & maxOccurs property of any complex type element. For detailed information about XML Schema, see Create adaptive forms using XML Schema as Form Model.

In the following code, the SampleTypepanel uses the minOccours & maxOccurs property.

<?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="leaderName" type="xs:string" default="Enter Name"/>
                <xs:element name="assignmentStartDate" type="xs:date"/>
                <xs:element name="gender" type="GenderEnum"/>
                <xs:element name="noOfProjectsAssigned" type="IntType"/>
                <xs:element name="assignmentDetails" type="AssignmentDetails"
                                            minOccurs="0" maxOccurs="10"/>
            </xs:sequence>
        </xs:complexType>

        <xs:complexType name="AssignmentDetails">
            <xs:attribute name="name" type="xs:string" use="required"/>
            <xs:attribute name="durationOfAssignment" type="xs:unsignedInt" use="required"/>
            <xs:attribute name="numberOfMentees" type="xs:unsignedInt" use="required"/>
             <xs:attribute name="descriptionOfAssignment" type="xs:string" use="required"/>
             <xs:attribute name="financeRelatedProject" type="xs:boolean"/>
       </xs:complexType>
  <xs:simpleType name="IntType">
            <xs:restriction base="xs:int">
            </xs:restriction>
        </xs:simpleType>
  <xs:simpleType name="GenderEnum">
            <xs:restriction base="xs:string">
                <xs:enumeration value="Female"/>
                <xs:enumeration value="Male"/>
            </xs:restriction>
        </xs:simpleType>
    </xs:schema>