Creating a repeatable group of form inputs

Like anything else in a Form Reform form, a repeatable group of inputs is created by adding a Repeatable Group block to a page.

If you would prefer to try an example first, have a play with Example - Repeatable Groups, then come back here to read about the details.

Repeatable groups work by identifying a region of the page as a repeatable group and adding a Repeatable Group block to that region. Behind the scenes, the repeatable group is a DOM element containing the form blocks to be repeated. From a Concrete CMS point of view, this could be a container, layout, stack or any other grouping of input blocks.

To create a repeatable group, start by adding a container, layout or stack to the page and within that add Form Reform blocks for each form input in the repeatable group of inputs. Then add a Repeatable Group block to that container, layout or stack. 

In edit mode the repeatable group will now be marked with a dashed lime green outline. Check this outline contains all the form inputs that you require to be repeatable and the Repeatable Group block's toolbar. If it does not, you may need to adjust the way the Repeatable Group block selects the container, layout or stack you are using for the group.

When you save and publish the page, visitors can now add a repetition of the group of form controls by clicking the Add button in the Repeatable Group toolbar. Groups added can also be deleted and optionally sorted.

Key points

• Every Repeatable Group must have a unique name. That name is used to identify inputs in the group and for subsequent saving and handling the group.
• Most form input blocks including Snapshot Upload and Webcam blocks can be used in a Repeatable Group. Some blocks are necessarily unique and cannot be repeated in a group, such as a the Submit block, Message Display block, Captcha and CCM Token blocks. For details, check the list of Form Reform blocks. Form Reform will alert you to any blocks that are incompatible with Repeatable Groups.
• Repeatable Groups cannot be nested. You can't have repeatable groups within repeatable groups.
• You can add other kinds of block such as content blocks to Repeatable Groups. Some JavaScript dependent blocks may behave in unexpected ways depending on how they are coded.
• The Behaviour setting for blocks in a repeatable group should match the Behaviour of the Repeatable Group block.
• Repeatable Groups can be used in single step forms, in each step of a multi-step form, in ajax forms, in multi-step ajax forms and in tabbed forms.
• Limits for minimum and maximum repetitions can be configured for each group.
• You can have as many different repeatable groups as you like.

Handling a repeatable group of form inputs

Validating form data

Within repeatable groups, form fields within each repetition of the group are validated by the Validate Submission form handler.

Where a field is only shown and enabled with some repetitions of a group, using Visibility Rules or otherwise, the option Relax server-side required field validation may be necessary to allow the groups to validate when required fields could be hidden/disabled. You may then need to add handlers to the pipeline to explicitly ensure the genuinely required fields are present.

Saving form data

If all you need to do is save the items in a group with the form submission, then you don't need any special processing. The Save to Default, Save to Session and Save to Cookie handlers simply serialize the data in the group with the rest of the form data and save it as they would any other data.

Processing form data

If you need to apply other processing to repeatable groups in the form handler pipeline, inputs in a repeatable group are identified in {{place_holders}} by indexing with a dot notation. For example, instead of {{form:input_name}} you can identify the first two repetitions of the group containing input_name using

{{form:group_name.0.input_name}}

{{form:group_name.1.input_name}}

That is fine if you have a fixed and required number of repetitions of a group, but it begs the question, how can you handle inputs when a group could have a variable number of repetitions?

One approach would be to build logic using Condition If / Condition Else If / Condition Else / Condition End handlers. If that is your preference, then go for it. However, there is a better way. For handling repeatable groups, we have a dedicated pair of handlers for looping over each iteration of a repeated group using Iterate Repeatable Group /  Iterate Repeatable Group End. If you are familiar with code, think of these as the form handling equivalent of a foreach loop.

Iterating through a Repeatable Group

In the Iterate Repeatable Group handler you specify the name of the input group to be iterated. All subsequent form handlers up to the Iterate Repeatable Group End handler will then be repeated for each repetition of the group. Rather than needing to specify the index of the repetition with {{form:group_name.0.input_name}} as described above, a new placeholder category group_item can be used to refer to the grouped inputs in the current repetition.

{{group_item:input_name}}

As with other categories, repeatable group_items also provide the more generic placeholders

{{group_item:all}}

{{group_item:all_formatted}}

Within each iteration you can build whatever handling you like. Build messages, send emails, save data just for that iteration, build conditional processing using complete sets of conditional handlers, use iterate data handlers for complex data within a group, create complex validation. Whatever you like.

If your handlers need to be aware of where you are in an iteration, the group category provides metadata about the iteration process.

{{group:name}} - provides the name of the group

{{group:index}} - provides the current index within the group (0...N-1)

{{group:iteration}} - provides the current iteration within the group (1...N)

{{group:size}} - provides the total size of the group (N)

For example, to add a simple item X of N note to a message, "Item {{group:iteration}} of {{group:size}".

Iterating through Data

You can also iterate through lists of data using an Iterate Data handler and the Iterate Data End handler. The enclosed handlers will then be repeated for each item of the the list. As with iterating through a repeatable group each iteration provides data specific to that iteration with the iteration category.

{{iteration:input_name}}

The Iterate Data / End handlers can be used as an alternative way to iterate through simpler repeatable groups, or to iterate through list inputs.

If your handlers need to be aware of where you are in an iteration, the iteration category also provides metadata about the iteration process.

{{iteration:value}} - the value of the individual item within the multi-value item of data

{{iteration:index}} - provides the current index within the list (0...N-1)

{{iteration:iteration}} - provides the current iteration within the list (1...N)

{{iteration:size}} - provides the total size of the list (N)

For example, to add a simple item X of N note to a message, "Item {{iteration:iteration}} of {{iteration:size}".

Key points

• Iterate Group cannot be nested within Iterate Group. 
• Iterate Data cannot be nested within Iterate Data ​​​​​​. 
• You can have iteration within a condition, or conditions within an iteration, but you cannot overlap conditions and iterations.
• You can Iterate Data within Iterate Group (or vice-versa), but you must not overlap the start/end. Any iteration of data within a group must be ended before the iteration through the group is ended. 

Form Reform does not prevent you from constructing such an interleaved pipeline, but don't expect it to behave!

• The Import Quarantine Files handler imports all files in quarantine, not just quarantined files for an iteration. Hence Import Quarantine Files should be before or after iterating through a group and not repeated within each iteration.
• On Success / On Error handlers can jump out of iterating through a group or iterating through data.
• Consider using Form Reform Developer to help find problems in complex handler pipelines.

Testing and debugging repeatable groups

The Options tab of the Submit block dialogue provides debugging and logging options.

See Problem Solving for more about repeatable groups and for details of logging and debug levels.

Form Reform Developer can help find problems in complex handler pipelines.