Adding classes to Repeater items for custom styling in admin

[Robin S]

In a current project I am using a Repeater field to build a kind of pseudo-table, where each Repeater item is a row. Some of the rows are headers, and some have buttons that toggle corresponding checkbox fields in a hidden FormBuilder form.

The problem was that when the Repeater items were collapsed I couldn't see which rows were headers and which contained buttons.

I tried including the fields in the Repeater labels but it still didn't provide enough visual difference to be quickly recognisable. So I investigated how classes could be added to selected Repeater items in admin depending on the value of fields within the Repeater items. This is what I ended up with...

In /site/ready.php

// Add classes to selected service row Repeater items
$this->addHookAfter('InputfieldFieldset::render', function(HookEvent $event) {
    /* @var $fieldset InputfieldFieldset */
    $fieldset = $event->object;
    $attr = $fieldset->wrapAttr();
    // Fieldsets in a Repeater inputfield have a data-page attribute
    if(isset($attr['data-page'])) {
        // Get the Repeater item
        $p = $this->pages((int) $attr['data-page']);
        // Check field values and add classes accordingly
        // If item is a header
        if($p->row_type && $p->row_type->id == 2) {
            $fieldset->addClass('header-row');
        }
        // If item has a checkbox button
        if($p->fb_field) {
            $fieldset->addClass('has-checkbox');
        }
    }
});

In admin-custom.css (via AdminCustomFiles)

/* Special repeater rows */
.Inputfield_service_rows .header-row > label { background:#29a5aa !important; }
.Inputfield_service_rows .has-checkbox > label .InputfieldRepeaterItemLabel:before { font-family:'FontAwesome'; color:#73cc31; content:"\f058"; display:inline-block; margin-right:6px; }

Result

 

[maxf5]

This rules, Robin!

i am using it for a similar case where the select field in the repeater should be highlighted if selected.
(later on three highlights are shown in a teaser)

if($p->techhighlight == 1) {
	$fieldset->addClass('is-highlight');
}

[PWaddict]

Nice tutorial but there is a small issue. Pressing the trash icon in the items we modified the color doesn't turn it to red and this might result in confusion for non-superusers.

[PWaddict]

I fixed it. @Robin S update the css rule with this:

.Inputfield_service_rows .header-row > label:not(.ui-state-error) { background:#29a5aa !important; }