October: Repeater: Collapse all by default and accordion style

[robinbonnes]

Feature request

My client requested two features for the repeater formwidget and I would like to know if there is a bigger demand for this.

1. Collapse all repeater items by default. This is needed for the pages plugin, to give more overview to a static page with a lot of sections (repeater items) active. Example:

1. Collapse other repeater items when opening one of them. Just like in Bootstrap accordions (https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example), when you open a repeater item it should collapse any other open repeater item.

Proposal

Add two options to the repeater formwidget:

• collapsedByDefault: Collapse all repeater items in the same formwidget by default. Type: boolean, default: false.
• accordionStyle: Collapse other repeater items in the same formwidget when opening an item. Type: boolean, default: false.

References

• https://github.com/rainlab/builder-plugin/issues/165
• https://github.com/octobercms/october/issues/2631

[LukeTowers]

That sounds like a good idea to me @robinbonnes. Not sure about the config names but that's a minor detail that could be improved on later.

[robinbonnes]

For now I can live with this quick-and-dirty fix to collapse repeaters by default:

$(document).render(function() {
    $('form[data-object-type="page"] [data-control="fieldrepeater"]').each(function() { 
        $(this).fieldRepeater().data('oc.repeater').collapseAll(); 
    });
});

[SebastiaanKloos]

@robinbonnes Sounds like a good improvement. Do you need any help with creating a PR?

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see it actioned, please respond and we will re-open this issue.

[roojai]

$(document).render(function() {
$('form[data-object-type="page"] [data-control="fieldrepeater"]').each(function() {
$(this).fieldRepeater().data('oc.repeater').collapseAll();
});
});

Hi there, was wondering where you put this code. Thanks

[bennothommo]

Added in https://github.com/octobercms/october/pull/4877.

[daslicht]

So this is added in the current version ? How to use it please?

[mightyhaggis]

@daslicht Somehow I missed this update! And a great one it is.
Looking through the Issues and having just tested to find it works :)

{repeater name="" tab="" prompt="" style="accordion"} ... {/repeater}
Options for style: https://github.com/octobercms/october/pull/4877#issue-362492258

[LukeTowers]

@mightyhaggis @daslicht docs are updated here: https://github.com/octobercms/docs/blob/master/backend-forms.md#repeater. They'll be updated on the main site as soon as 467 becomes stable.