Skip to main content

Repeater

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Create a repeatable set of form fields that can be added and removed.

The Pulsar team
The Pulsar team
NameFavourite foodActions
You have not added any team members
Team Member

Basic usage

{{ form.create() }}
{{
form.repeater_start({
'label': 'The Pulsar team',
'empty': 'You have not added any team members',
'headings': [
{ name: 'text', label: 'Name' },
{ name: 'select2multi', label: 'Favourite food' }
],
'max-entries': 3,
'add-new-group-text': 'Add',
'add-another-group-text': 'Add another'
})
}}

{{
form.fieldset_start({
'legend': 'Team Member'
})
}}

{{
form.text({
'label': 'name',
'id': 'repeater-text',
'name': 'text'
})
}}

{{
form.select2({
'label': 'Favourite food',
'id': 'repeater-select2multi',
'name': 'select2multi',
'multiple': true,
'options': [
{ value: 'food_pizza', label: 'Pizza' },
{ value: 'food_gravy', label: 'Gravy' },
{ value: 'food_puds', label: 'Yorkshire Pudding' }
]
})
}}

{{
form.fieldset_end()
}}

{{ form.repeater_end() }}
{{ form.end() }}

Dependencies

You can configure this helper using the common helper options.

var RepeaterManagerComponent = require('/path/to/Repeater/RepeaterManagerComponent'),
repeaterComponentFactory = require('/path/to/Repeater/repeaterComponentFactory');

module.exports = {
RepeaterManagerComponent,
repeaterComponentFactory,
};
(function ($) {
pulsar.repeaterManager = new pulsar.RepeaterManagerComponent(
pulsar.pulsarForm,
pulsar.repeaterComponentFactory,
$html
);

$(function () {
pulsar.repeaterManager.init();
});
}(jQuery));

Options

OptionTypeDescription
labelstringThe repeater input label text
emptystringThe empty placeholder text when no items have been added
headingsArrayAn array of heading config objects: { name: string, label: string }
max-entriesintMaximum (inclusive) number of entries that can be added
add-new-group-textstringThe text content of the add new entry button
add-another-group-textstringThe text content of the add another new entry button

Headings

The main configuration item of note is the headings property. It is here that we define which nested components are represented as a heading in the Repeater preview. If a nested component does not have an associated heading it will still function as desired, it’s input will be saved and submitted as part of the form request. This allows a user to choose 2-3 preview headings to summarise the contents of a Repeater whilst having as many fields as required.

Headings must be described as an array of objects in the following schema:

{
headings: [
{ name: string, label: string }
]
}

The name property refers, and must match, the corresponding nested field. The label property is the text content of the preview column heading.

Nested fields

Nested fields are the input components inside a Repeater. All Pulsar form components should be compatible with the Repeater at the time of publishing. Any additional form components should take into consideration their repeater integration. The Repeater will remove name attributes from inputs in order to function, therefore any stateful components that depend on this attribute may need a integration service creating. See the js/Repeater/PseudoRadioInputService.js as an example.