Are conditional field settings possible?

• speakincode

• March 6, 2020 at 10:51 am

I’ve created a new custom Field Type that also has few custom Field Settings. I’m wondering if there is a way to conditionally show one Field Setting based on another Field Setting.

For example:

// Show either the Button Text or Button Icon field setting
acf_render_field_setting($field, [
    'label'        => __('Button Type', 'acf'),
    'instructions' => '',
    'type'         => 'button_group',
    'name'         => 'button_type',
    'layout'       => 'horizontal',
    'choices'      => [
        'text' => __('Text', 'acf'),
        'icon' => __('Icon', 'acf')
    ]
]);

// Only show if Button Type field setting is set to Text
acf_render_field_setting($field, [
    'label'        => __('Button Text', 'acf'),
    'instructions' => '',
    'type'         => 'text',
    'name'         => 'button_text'
]);

// Only show if Button Type field setting is set to Icon
acf_render_field_setting($field, [
    'label'        => __('Button Icon', 'acf'),
    'instructions' => 'Select an Icon',
    'type'         => 'text',
    'name'         => 'button_icon'
]);

• John Huebner

• March 8, 2020 at 3:41 am

Yes, this is something that is possible, unfortunately I cannot point you to any examples of doing so except to point out that this is done for the built in radio field and checkbox field. Both of these fields have a toggle for allowing new custom values to be added and when it is toggled on there is another field setting toggle to set saving the custom values as new field choices. I would investigate the JavaScript associated with these field settings to see how it is done for these fields.

• speakincode

• March 8, 2020 at 5:24 am

Thanks for the direction John.

I ended up building this out from scratch, hiding the table rows with CSS visibility: collapse and then toggling them to visibility: visible with click events on the button group.

The hardest part was digging through the core for an action to hook into, but I eventually found render_field_settings.

But after your direction, I was like, duh… of course, there’s already toggles like on the radio and checkboxes you mentioned as well as the built in Conditional Logic toggle. So I took a look at their acf_render_field_settings and found the conditions key. I implemented that on my example and it works perfect, no extra JS or anything.

Thank you for the reply and the direction, and all your help on this forum, you’re a rockstar!

For anyone else, here’s a working example:

// Show either the Button Text or Button Icon field setting
acf_render_field_setting($field, [
    'label'        => __('Button Type', 'acf'),
    'instructions' => '',
    'type'         => 'button_group',
    'name'         => 'button_type',
    'layout'       => 'horizontal',
    'choices'      => [
        'text' => __('Text', 'acf'),
        'icon' => __('Icon', 'acf')
    ]
]);

// Only show if Button Type field setting is set to Text
acf_render_field_setting($field, [
    'label'        => __('Button Text', 'acf'),
    'instructions' => '',
    'type'         => 'text',
    'name'         => 'button_text',
    // Here's the magic
    'conditions'   => [
        'field'    => 'modal_button_type',
        'operator' => '==',
        'value'    => 'text'
    ]
]);

// Only show if Button Type field setting is set to Icon
acf_render_field_setting($field, [
    'label'        => __('Button Icon', 'acf'),
    'instructions' => 'Select an Icon',
    'type'         => 'text',
    'name'         => 'button_icon',
    // Here's the magic
    'conditions'   => [
        'field'    => 'modal_button_type',
        'operator' => '==',
        'value'    => 'icon'
    ]
]);

• John Huebner

• March 9, 2020 at 11:13 pm

I’m going to save this. The conditions key must be a new one but knowing that it is there will help greatly since I’ve done the same type of thing in the past adding new field settings to exiting fields.

• speakincode

• March 19, 2020 at 10:32 am

Update:

So my example above works great and it’s nice moving forward to know that conditions key is there when you need it.

However, I’ve ran into an issue during testing where when I have a field with these settings, and I duplicate that field, it still works great, BUT… When I duplicate the field, and then duplicate the newly duplicated field, the newest field I duplicated doesn’t fire the show/hide from the conditionals.

For example:
Field 1 (saved in db) -> duplicated to Field 2 (not saved yet) [Field 2 conditionals work]
Then: Field 2 (still unsaved) -> duplicated to Field 3 (also not saved yet) [Field 3 conditional don’t remove hidden attributes from the hidden fields when toggled to]

I’ll post a solution if I find or create one. I may move a different direction on this project though. But just be aware if your using the conditions key.

• speakincode

• March 20, 2020 at 5:47 am

Fix for my “Update” issue above:

In the issue above, Field 3 conditional settings weren’t working appropriately. The fields that were supposed to be hidden where indeed hidden, but the toggle to reveal them no longer revealed them.

After many hours digging deep into ACF’s javascript and much trial and error, I finally found that calling acf.getField($field) is what is instantiating those fields properly. Why it isn’t working properly in my example, I’m not sure, but here’s the fix:

/**
 *  Fires when duplicating a field from a previously unsaved, duplicated field.
 */

// Only targeting select fields for this example
acf.add_action('append_field/type=select', function ($field) {

  // Only target select fields that have my custom class
  if ($field.hasClass('my-custom-class')) {

    // Instantiate hidden sibling fields so conditionals and Select2 UI work
    acf.getFields($field.siblings('.my-custom-class.acf-hidden'))

  }

})