Support

Account

Register Login

Home › Forums › Add-ons › Flexible Content Field › Populate Flexible Content Rows Programmatically

Solving

Populate Flexible Content Rows Programmatically

  • I have a site with elements to add to a page via a flexible content field. In a way it’s a layout builder. It’s great in the flexibility it gives. One problem is the complexity of creating new full layouts from scratch is a bit much for some users.

    I’d like to have a radio field where the user can choose an option and based on their choice a collection of flexible content rows are auto populated onto the page (while still allowing them to customize). Is there some hook to be able to programmatically add rows from a flexible content via js.

    Similarly, is there an a way to define a default set of flexible content rows?

  • Hi @circlecube

    I think you can do it by using two different methods, using Javascript code to add the rows or using PHP code to generate the layout dynamically.

    Unfortunately, I believe using the Javascript code would be more complex than using the PHP code. If you want to learn about it, please take a look at this page: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

    If you use the PHP code, I think you can create several sets of custom fields and use it dynamically in the layouts. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/register-fields-via-php/.

    I hope this helps 🙂

  • This may be a solution to a similar problem, but I don’t think it will help my situation. I already have the fields all set up and working on a page. I’m just looking for a scripted way to add a group of fields rather than just adding one at a time.

    Say I have a flexible content created with 10 different layout options. I could manually select each one in order on the page and fill in the fields and select images to include etc as usual. It’s just time consuming if I am going to be creating a lot of pages. I’d like an option to add a radio or select field and when it’s value is updated to add a predefined set of fields from my flexible content in a certain order.

  • Hi @circlecube

    I think it will be easy if you don’t need to see the result on the flexible content right away. That means that you need to update/save the post, which reloads the editor page, to show the result. To do that, you can create a select or radio field to list the layout you want and then use the acf/save_post hook and the update_field() function to update the flexible content.

    If you want to show the result right away, I’m afraid you need to create advanced custom code using Javascript. For something like that you would need to hire a developer to help you out with it, and I’d recommend looking for one on https://studio.envato.com/ or https://www.upwork.com/.

    I hope this makes sense 🙂

  • @James Thanks for the suggestions. I really am interested in doing this via javascript. I was wondering if there was any documentation about how to make it happen. I am in fact a developer and am looking for direction.

    So far I have been able to add some but it’s spotty. I just call:
    acf.fields.flexible_content.add('my_layout_name');

    I’m having trouble finding a way to target certain flexible content fields over others.

  • Hi @circlecube

    The flexible content field will create a random ID for the newly generated layout, so it will be hard to target it. What you can do is using the append action mentioned in this page: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

    I think you can also target the last layout after adding the new layout. This is what I tested in the console:

    jQuery(".acf-field-1234567890abc .layout[data-layout='my_layout_name']:last input[id$='field_abc1234567890']").val("test")

    Where “acf-field-1234567890abc” is the flexible content and “field_abc1234567890” is the custom field in the layout.

    I hope this makes sense.

  • Yes, this makes sense. I’m able to find and target the flexible content area, but I’m not finding much success once I have that target to add more layouts or rows to that flexible content field.

    It looks like I have to set the focus to that element and then the acf.fields.flexible_content object is updated and when I add elements it goes to the right place, but that doesn’t seem to be working 100%. I can set the focus with trigger.(‘focus’) or simply .focus() but it still doesn’t add them all the time. If there are multiple flexible content fields, I’m not sure how to set the acf focus to one vs the other via the script. It does seem to work however if I click the ‘add row’ button to focus on that flexible content field and then trigger my script. So I’m doing that for now, not ideal, but functional at least. Still saving quite a few clicks.

  • This reply has been marked as private.

  • For people reading this since the new JavaScript API was released, here’s the new method for adding a row to a flexible content field:

    var field = acf.getField( 'field_5f4f704c24dcf' );
field.add( { layout: 'layout_name' } );

  • Figured I’d add something to help people out who want to add a row to a flexible content field that’s inside of another flexible content field.

    acf.addAction( 'append', function( $el ) {
	if ( $( $el ).hasClass( 'layout' ) && $( $el ).is( '[data-layout="level1_layout_name_here"]' ) ) {
		var nestedFlexField = acf.getField( $( '.acf-field[data-name="NESTED_FLEX_FIELD_NAME"]', $el ) );
		nestedFlexField.add( {
			layout: 'level2_layout_name_here'
		} );
	}
} );

  • I’m running into a similar situation.
    I have a flexible content field (tabbed_content repeater) that allows the user to add a Tab Content section, and add tabs via a repeater.
    When they add a new post I’d like to be able to ‘auto populate’ that page with a tabb_content element, but still allow them to add/remove tabs (which is a repeater as mentioned).

    Is there any way to programmatically add this flexible content item of tabbed_content, with a predefined set of tabs..?

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Populate Flexible Content Rows Programmatically’ is closed to new replies.