Home › Forums › General Issues › Integrate ACF in a custom admin layout with dynamic content boxes
I have designed my own layout as an admin template for a custom post type. The layout contains any number of boxes arranged in a grid. These are actually separated content boxes.
The number of boxes can be manipulated and changed using JavaScript.
I can save the layout in post_meta data and load it again.
Is it possible that I can use field groups from ACF in these boxes? I think the challenge is that there are no fixed positions as the layout can contain any number of boxes. The field group I want to use is the same in each content box. Of course, the values may end up being different.
Does anyone have a good approach or a good hint where I should do further research to find a solution for this?
How do I incorporate ACF field groups into such a custom layout when the location can be dynamic?
ACF adds fields for posts on the “add_meta_boxes” run by WP. From what you describe there would be no way to distinguish between your content boxes.
In addition to this it would alter the DOM that ACF expects and this will likely cause none of the ACF JS or CSS to work properly.
There is also the matter of using the same fields in multiple times. All fields on the page must have unique names (meta_key) for every field. If you include the same field group multiple times than all of the fields would have the same names and keys, each time it is saved it will overwrite the previous value and when done all of them would have the same value.
Thank you John for your feedback.
What I’m reading here is that each box needs a unique parent assignment in ACF, much like a repeater field. As I understand it, it would therefore make sense to create the layout as a separate ACF field.
The repeater function is in itself a good basis for the idea I have in mind, except that each row can have different attributes, not just the index.
Is it possible to create a field directly on the repeater field, or to extend it and customize functions?
I have already created my own fields, but no fields with nested field groups inside.
Ignoring for a minute the fact that you’ve added your own layout of boxes for WP, what you describe is completely possible using ACF by itself.
You would start by creating your fields that need to be duplicated to all the boxes in a single field group. You would set this group to inactive, meaning it will not be displayed anywhere automatically.
Then you could create a new field group for each of your “box” layouts. Each of these groups would have have a “Group Field” representing each box set to block display. There could be a different number with different layouts in every field group. The location rules for each of these groups could be assigned to different page templates. Each of the groups for all of these field groups would have a single sub field that is a Clone of the field group containing all of the fields.
I think the actual representation of the fields in the editing is my main concern. The boxes should make use of the CSS grid so that complex grid layouts can be created in the backend.
I want to be able to display not only columns in a row, but also cells that span two rows. I would like to be able to display this in the admin area. That is the reason for the custom layout.
Then I go back to my first 2 points, there isn’t a way to show different field groups inside of your boxes and even if you could ACF will not work correctly with an altered DOM.
There have been people that have tried this in the past, basically what they did was to use JavaScript to move the field groups after they were rendered. However they ran into the issue that CSS was applied incorrectly or not at all and much of the JavaScript associated with ACF did not function.
But as far as I can tell, I can display the same field group in as many instances as I want, right?
For example, I have created a flexible content field group that I can repeat any times using a repeater.
That would also help me if there was such a solution.
Thanks to the flexible content field, the group can actually be put together flexibly. There is no need for different field groups in different boxes. It can only be the one field group that is repeated in all boxes.
Yes, if you put the repeated fields as sub fields in any type of field allows this, as long as the parent field name is unique or you are using a repeater. Also the clone field can be set up to prepend the clone field name to the cloned fields.
meta keys follow these rules
// repeaters and flex fields
"{$parent_name}_{$row_index}_{$sub_field_name}"
// group fields
"{$parent_name}_{$sub_field_name}"
// clone fields set to prefix field names
"{$clone_name}_{$cloned_field_name}"
That is helpful. In principle, I could create my own field type that works in a similar way to the repeater.
Is there a boilerplate for this or do I need to internalise the code from the repeater to create a similar field?
The meta key will somehow look like this:
{$parent_name_box}_{parent_name_flex-field}_{$row_index}_{$sub_field_name}
Which types are available for render_field_settings. Can I use something like subfields?
The repeater field does not work like any of the other fields. You’d need to look at the repeater field class in ACf. No one has ever tried to duplicate what the repeater field does.
After our exchange yesterday, I thought everything through again today.
I have created a new field based on the boilerplate.
I now use a single field group that I want to display in my boxes for editing. In the render_field() function, I can read the field group with acf_get_field_group() and output the fields accordingly in my boxes with acf_render_field_wrap().
For saving, I retrieve the data from $_POST and place my box identifier, e.g. {$box_field_name}_{$field_name}, in front of the post_meta keys. This works with simple text fields, but reading in and out repeaters is more difficult.
The correct number of lines are displayed and saved, but the values remain empty. What could be the reason for this?
if(isset($field_object['sub_fields'])){
foreach ($field_object['sub_fields'] as $sub_field) {
$field_value = get_field($sub_field['key'], $id);
$acf_render_subfield_attributes[] =
array(
'type' => $sub_field['type'],
'name' => $sub_field['name'],
'value' => $field_value,
'key' => $sub_field['key'],
'label' => $sub_field['label'],
'instructions' => $sub_field['instructions'],
'required' => $sub_field['required']
);
}
}
$acf_render_attributes['sub_fields'] = $acf_render_subfield_attributes
I have solved the problem. For repeaters and flexible layouts, the field keys must be specified for the values instead of the names in the associative array.
However, this makes it very complicated with flexible layouts, as I have to work through the whole array and find the right key for each name in order to replace it.
Can I somehow retrieve values with field keys instead of field names? Is there a similar function to get_fields for this?
get_field() can take either the field name or the field key.
The difference is that with a repeater/flex field the inputs are in an nested array. You cannot use get_field(‘field_key’) on a sub field. You must loop over the repeater and use get_sub_field(‘field_key’). Without the loop ACF has no way of knowing exactly what field value to get.
Thank you for your patience.
I actually meant that I get the complete nested array of a repeater with get_field() with field keys instead of field names.
After researching for a while, I realized that the last parameter format does exactly that. This gives me field keys instead of names.
I have now found a solution that works quite well:
1.) I use acf_get_field_group() to read in the field group that I would like to display in my boxes.
2) With acf_get_fields() I get the corresponding fields in an array and can cycle through them.
3) With acf_get_field() I get the field object in the loop that I need later to display the field.
4) With get_field() and the last parameter set to false, I get the representation of the data that has already been saved for this field
5) I pass all this to acf_render_field_wrap() and so get the representation of the control in my box
Finally, I need to make it possible to have several boxes with the nested fields at the same time. At the moment it is only possible with one box.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.