Create a generic "group" layout field type

• JakeSiemer

• December 8, 2015 at 1:43 pm

Looking to create a simple field type that is just a grouping of multiple sub fields — similar to the “Repeater field”, except that it doesn’t need to repeat.

The reason I want this is for general organization. It’ll give me more flexibility with the layouts that I’m trying to create.

I started to build this with the “Repeater field” sourcecode, and had everything was displaying as I wanted it, but the saving was not working. I suspect that using the repeater field is probably overkill, so maybe I’m just over-complicating this.

I should also note that I was able to accomplish the same layout I am looking for by using the “Reusable field” addon (https://github.com/tybruffy/ACF-Reusable-Field-Group), however, since the fields aren’t actually contained in the same field group, there is no way to use them in conjunction with conditional logic, and this plugin breaks when trying to use it inside of a Repeater field.

Any ideas on how I can accomplish this would be great!

• JakeSiemer

• December 9, 2015 at 4:14 am

Here’s a mock of the layout I am trying to achieve…

http://postimg.org/image/lamafxz5z/

Note how the middle column is a group of fields. Could do this with a Repeater field but I do not want the user to be able to add more than 1, and I want one there by default.

• JakeSiemer

• December 10, 2015 at 3:07 am

I was able to solve this by not re-inventing the wheel.

What I did was simply use the Repeater field, but I added some JavaScript to auto-add the first row if the field’s minimum is set to a negative number and there are no rows added…

/*! FLEXIBLE/REPEATER: AUTO-ADD ITEM IF EMPTY **/
acf.add_action('ready append', function($body){
  var $fields = $body.find('.acf-field-flexible-content, .acf-field-repeater');
  var $target = $fields.find('.acf-flexible-content, .acf-repeater').filter('.empty, .-empty').filter(function(){
    if ($(this).data('min') !== 0 && $(this).parents('.clones, .acf-clone').length === 0) {
      return true;
    }
  });
  if ($target.length > 0) {
    var $button = $target.find('> ul').find('> li').find('> .acf-button').filter('[data-event="add-layout"], [data-event="add-row"]');
    $button.click();
  }
});

Then I added some CSS to hide all the functionality on the Repeater field itself (so I hide the add, remove, collapse buttons).

/*! ACF: FAUX FLEXIBLE/REPEATER */
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > ul > li > .acf-button,
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > .layout > .acf-fc-layout-handle,
.acf-field-flexible-content .acf-flexible-content[data-min^="-"] > .layout > .acf-fc-layout-controlls,
.acf-field-repeater .acf-repeater[data-min^="-"] > ul > li > .acf-button,
.acf-field-repeater .acf-repeater[data-min^="-"] > table > tbody > tr > .acf-row-handle {
  display: none;
}

.acf-field-repeater .acf-repeater[data-min^="-"] > table > tbody > tr > .acf-fields {
  border-left-width: 0;
}

Now I have the ability to group my content by leveraging the Repeater field! I’m not going to lie, the CSS may not be 100% complete — it works for my scenario, but there may be other scenarios I haven’t tested yet.

• John Huebner

• December 11, 2015 at 2:56 pm

This plugin is a similar concept to the one you mentioned, it does allow conditional logic to be used, but for the entire group of fields. It does not allow conditional logic for individual fields in the field group being used, so not sure it will help you. https://github.com/Hube2/acf-reusable-field-group-field