Support

Account

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?

    • James

    • May 20, 2016 at 2:39 pm

    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.

    • James

    • May 24, 2016 at 2:33 pm

    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.

    • James

    • May 25, 2016 at 1:36 pm

    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.
    • gavin310

    • September 15, 2020 at 12:33 am

    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'
    		} );
    	}
    } );
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.