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.
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:
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.
- Under THEN:
- To create an add panel button, select Add Instance, and drag-drop the panel using or select it using Drop object or select here.
- To create a delete panel button, 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 an add panel button, specify this.panel.instanceManager.addInstance()
- To create a delete panel button, specify this.panel.instanceManager.removeInstance(this.panel.instanceIndex)
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:
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
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:
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.
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.
<?xml version="1.0" encoding="utf-8" ?> <xs:schema targetNamespace="http://adobe.com/sample.xsd" xmlns="http://adobe.com/sample.xsd" xmlns:xs="http://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.