Using Repeaters and Flexible Content in new Field Types

• nday

• May 19, 2017 at 10:28 pm

Hi,

Is there any way to use Repeaters & Flex Content fields in new field types?

I’m creating a new field type (using the boiler plate) that controls styling for elements. I want the user to be able to add multiple colours using the colour picker to allow complex background gradients. This would be easy using a repeater but as per the question is that possible when creating a new field type?

• John Huebner

• May 20, 2017 at 3:06 am

Yes, there is, at least I’ve used a repeater field in a new field type https://github.com/Hube2/acf-medium-editor, it actually includes a nested repeater. (see line 248 of https://github.com/Hube2/acf-medium-editor/blob/master/fields/acf-medium-editor-v5.php)

Basically, any field type can be used as a field setting for another field type. For example, all of the “text” setting fields are ACF text fields. Same goes for every other field setting that you see.

The main difference that I found is that with repeater sub fields is that you need to set the “key” attibute to the same value as the “name” attribute. This will be what ACF uses to store your sub field value internally.

• nday

• May 20, 2017 at 7:18 am

Thanks John, that’s really useful – great add-on too.

Not sure that sorts my issue out though, I want whoever is editing the post to be able add/remove rows/inputs when editing the posts themselves.

• John Huebner

• May 20, 2017 at 7:47 am

I didn’t think about that.

In that case I would look into adding a repeater field render field area and adding a custom update_value and load_value methods that saves the “value” of the field based on this other field and returns an array from the field. Basically, you need to use a repeater field for the field value. However, if you want to add a “value” and the repeater, that would be an issue unless you built some custom way to store both values because ACF can only store one “value” per field.

• nday

• May 20, 2017 at 8:23 am

Thanks again John. I had a feeling it might be quite complex..

One the real pros for being able to create new field types is the ability to control the html structure and js functionality of the edit screen. Unfortunately it does seem that using the Repeaters & Flex fields inside a new field type will be rather complicated…

I’m actually building a Page Builder, I’m more or less there with a proof of concept, but being able to use Repeaters & Flex within the various new field types would make things so much easier and cleaner.

I’ll give it a go.

• John Huebner

• May 24, 2017 at 8:54 am

I didn’t reply sooner, I had thought to try this out, but I haven’t had time. It’s a lot of building to do to test a theory. I certain that it can be done though. When I was building the add on that I built, well, I just tried it and played with it until I got it to work. I had a specific need for a client, so I had the time. Frankly, if it had not worked I’m not sure what I would have done.

The ACF field type template https://github.com/elliotcondon/acf-field-type-template includes several methods that are commented out, load_value(), update_value(), render_field() and format_value() are the important ones.

I’m guessing that you want a real “value” + you want to add these additional settings.

In update_value, you would need to look in the ‘$_POSTarray to get the values from the repeater field and then do something with the actual value of the field and these extra settings to store them in an array before they are saved to the database. The big question here is what does the submitted value look like? Which ties into the comment below aboutrender_field`

In ‘load_valuewhat you'd need to do is to extract the actual value from the field and then store your additional settings into some custom field argument, for example$field[‘custom_settings’]`.

In render_field, this is the part that’s a guess, but you should be able to set up a repeater field simply by calling one of the build in ACF functions that does this, possibly acf_render_field_wrap() or acf_render_field() or maybe even running the action do_action('acf/render_field', $repeater)

Then you have format_value that would do the work of taking the “value” and applying your custom options from the repeater to it.

The question is, how much time do you have and how much time and frustration will is save the person that needs to use it. Only you can answer the question. In my case I had to give the client a way to add formatting to single lines of input that would be used for headings throughout the site and this also included the ability to apply specific colors to specific portions of the text. My choices were to build a field type or to implement some type of “markdown” in text fields or textarea fields. If I had gone the markdown path what would have happened is that the client would not have been able to manage this content themselves and I would have ended up doing the work anyway. So not only does the field type I created make it possible for the client to easily do the work themselves, it saves me a boatload of time that I would have been spending managing their content, far more time than it took me to create the field type. This is what I weighed the time to create the field type against, how much time will it save me later.

I can tell you one thing though. I will be keeping this conversation in mind on future projects. I find the possibility of doing something like this extremely interesting, as if you probably can’t tell that by this extensive comment :P. I will also probably investigate this if I ever manage to find some free time even if I don’t find a specific need.

• nday

• November 3, 2017 at 9:46 pm

Hi John, I must have missed the email alert when you replied to this, so apologies for my delayed response.

In the end I didn’t use a new field type for the Page Builder side of the project, I used a combination of Flex and Repeaters utilising cloned Field Groups, which coupled with some custom js has worked well. I think your right and it is possible but for the scope of the project it would be too time consuming to work out, and as I’ve managed to achieve it with the built in ACF functionality, ultimately not worth it at the moment…

Like you however I’m keen to try it properly at some point, so I’ll let you know how I get on.

I have, however created a new field type to handle options/styles, however it is has turned into a bit of an unwieldy beast. I’m essentially providing settings for margin, padding, background image/colours/gradients and typography. Different sections are enabled in the Field Settings so it can be used for Rows, Columns or the actual content blocks. I feel it does need to be it’s own field type as I’m using quite a bit of custom js and css to control the UI.

The problem is it takes an age to load especially when there are lots of Field Groups that use it. I’ve narrowed the load time issue to the actual render_field( $field ) function, which contains quite a bit code. So now I’m wondering if it’s possible to use AJAX to trigger the rendering of the field when a button is clicked rather than have each render on page load.