1

I want to display one of two fields on page render, depending on which field was selected on save.

I have a content type with a paragraph field called Banner Header. Banner header has a field group called Callout links. Callout links contains three items:

  1. A field that accepts a single link.
  2. A field that accepts multiple links.
  3. A select list radio button called Callout Link Control.

Here is the custom paragraph code for my banner header:

{# initiate the printing of the banner #}
{{content.field_banner}}
<div class="banner-info
{% if content.field_callout_icon.0 or content.field_callout_text.0 %} has-callout
{% else %}
no-callout
{% endif %}">
    {# print out the title of the node #}
    <h1>{{ node_title }}</h1>
    <div class="leadin-wrapper {{ content.field_leadin_background.0['#markup'] }}">
       <div class="leadin-subwrapper">
           {{content.field_leadin}}
       </div>
    {# If there is content in the field_callout_icon or field_callout_text #}
        {% if content.field_callout_icon.0 or content.field_callout_text.0 %}
           <div class="callout-wrapper {% if content.field_callout_link.0 or content.field_small_callout_button_link.0 %} linked{% endif %}">
                {% if content.field_callout_link_control.0 == 'A single large button link' %}
                         <a href="{{ content.field_callout_link.0['#url'] }}">
                {% endif %}
                {% if content.field_callout_link_control.0 == 'Multiple small button links' %}
                        <a href="{{ content.field_small_callout_button_link.0['#url'] }}">
                        {% if content.field_callout_link.0 %}
                                <div style="visibility: hidden;">{{content.field_callout_link.0}}</div>
                        {% endif %}
                {% endif %}
                <div class="callout-wrapper-inner">
                   {{ content.field_callout_icon }}
                   {{ content.field_callout_text }}
               </div>
                </a>
           </div>
        {% endif %}
    </div>
</div>

Depending on which radio button is selected, I want to display the corresponding Callout Link field: either field_callout_link or field_small_callout_button_link.

I've tried this a couple different ways. As you can see my my code, I attempted to control the way the fields display with twig.

I have also tried the conditional_fields module and set the following dependencies:

Cond. 1

  • Target Field: field_callout_link

  • Controlled By: field_callout_link_control

  • Description: !disabled

  • Value: [corresponding radio button is selected]

Cond. 2

  • Target Field: field_small_callout_button_link

  • Controlled By: field_callout_link_control

  • Description: !disabled

  • Value: [corresponding radio button is selected]

The behavior I see is that only the field field_callout_link displays on page render - regardless of which radio button is selected.

How can I control which field(s) display when the page renders based on radio button selection?

1

You don't need conditional fields for this. The simplest way to do this IMO is just look at the values either in the Twig file, or create a new variable in a preprocess function to indicate what to do.

Example:

{% if node.field_callout_icon or node.field_callout_text %}
  {% if node.field_callout_link_control.value == 'A single large button link' %}
    markup
  {% elseif ... %}
    markup
  {% endif %}
{% endif %}

Or you can preprocess the node and look at the field value there:

function mytheme_preprocess_node(&$variables) {
  $node = $variables['elements']['#node'];

  $field_value = $node->get('field_name')->getValue();
  // .. do stuff with the field value
  $variables['my_new_flag'] = 'some value or bool';
}

Then in the node twig, if its a bool:

{% if my_new_flag %}

Or if you assigned a value:

{% if my_new_flag == '...' %}

One thing I would advise against is looking into the render array to read or look for values. Use the node object or preprocess the node to evaluate the values and create new variables if you need them.

Here is a real example I am using which seems very similar to yours. I have a select field in a node type that indicates if the content is a service or a tool. Depending on which, I need to output the right SVG file next to the title. I am checking the value and creating a variable for the template:

mytheme.theme:

/**
 * Implements hook_preprocess_node().
 */
function mytheme_preprocess_node(&$variables) {
  $node = $variables['elements']['#node'];

  if ($node->getType() == 'services') {
    $variables['icon_type'] = $node->get('field_service_or_tool')->value;
  }
}

The node type twig file:

{% if icon_type == 'service' %}
  {% include "@mytheme/svg/general/service.html.twig" %}
{% else %}
  {% include "@mytheme/svg/general/tool.html.twig" %}
{% endif %}

I could just check that in the twig as well, but it keeps the template cleaner / easier to read in my opinion.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.