Repeatable sections are panels that can be added or removed to a form dynamically.
For example, while applying for a job, the job seeker provides previous employment details such as company name, role, project, and other information. Information of all the employers requires different but similar looking sections. In such a scenario, the employment form provides an employer section and also provides an option to dynamically add more such sections. These sections, which are added dynamically, are known as Repeatable sections.
You can use one of the following methods to create repeatable panels:
In the edit mode, select a panel, then tap . In the sidebar, under Properties, enable Make Panel Repeatable. Specify values for the Maximum and Minimum fields.
The Maximum field specifies the maximum number of times a panel can appear on the page. You can specify -1 in the Maximum Count field to allow the panel to appear for infinite number of times.
The Minimum field specifies the minimum the number times a panel appears on the form. If you set The Minimum Count filed to zero, later, you can remove all the instances via scripts after rendition is complete.
To create a non-repeatable panel, set value of the Maximum and Minimum field to one. The accordion layout does not support -1 in the Maximum Count field. You can specify a high number to give the notion of infinite value.
The parent of the panel, which is to be repeated, should contain add and delete buttons to manage instances of the repeatable panels. Perform the following steps to insert buttons to the parent and enable scripts on the buttons:
From the sidebar, drag-and-drop a button component to the parent of the panel. Select the component and tap . The rules of the button open in the rule editor.
In the Rule Editor window, click Create.
Select Visual Editor in the Form Objects and Functions row.
In the rule area, under WHEN, select state is clicked.
Select Code Editor in the Form Objects and Functions row. Click Edit Rules and in the code area:
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
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:
To read AA1 data, specify:
To read AA2 data, specify:
For more information, see: Class: InstanceManager#instances in AEM Forms Java API reference.
When all of the 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.
A panel has various layouts options. The Layout for accordian design option has out of the box support for repeatable panels. Perform the following steps to repeatable panel with Layout for accordian design option:
On the parent of panel to be repeated, tap . You can see the properties in the sidebar. In the Layout drop-down, select Accordion.
On a panel, which is to be repeated, tap . You can see the panel properties in the sidebar. Enable the Make Panel Repeatable tab, and specify value for the Maximum and Minimum fields.
Now, you can use the plus (+) and delete ( ) buttons to add and remove the panels.
Repeatable subform is similar to the repeatable panels in Adaptive Forms. In AEM Forms Designer, perform the following steps to create a repeating subform:
Attached .zip file contains a sample repeatable sub form.
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>
For non-accordian layout, use adaptive form button components to add and remove instances.