Robin S

Adding classes to Repeater items for custom styling in admin

Recommended Posts

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.

2017-08-08_201807.png.c6fdb96db48784ce0a4031b985164a63.png

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

2017-08-08_201735.png.b79850734fdddb7b9d9113ad9619d008.png

 

  • Like 11

Share this post


Link to post
Share on other sites

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');
}

Unbenannt.PNG

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.