Skip to content

Instantly share code, notes, and snippets.

@dinarcon
Created November 7, 2017 14:20
Show Gist options
  • Save dinarcon/ea67da074fca0c19c25b85e244262219 to your computer and use it in GitHub Desktop.
Save dinarcon/ea67da074fca0c19c25b85e244262219 to your computer and use it in GitHub Desktop.
Conditional fields in Paragraphs using the Javascript States API for Drupal 8
/**
* @file
* Example code from http://agaric.com/blogs/conditional-fields-paragraphs-using-javascript-states-api-drupal-8.
*/
/**
* Implements hook_field_widget_WIDGET_TYPE_form_alter().
*
* Example of conditional fields in paragraphs for Drupal 8.
*/
function nicaragua_field_widget_paragraphs_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) {
/** @var \Drupal\field\Entity\FieldConfig $field_definition */
$field_definition = $context['items']->getFieldDefinition();
$paragraph_entity_reference_field_name = $field_definition->getName();
if ($paragraph_entity_reference_field_name == 'field_sections') {
/** @see \Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget::formElement() */
$widget_state = \Drupal\Core\Field\WidgetBase::getWidgetState($element['#field_parents'], $paragraph_entity_reference_field_name, $form_state);
/** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
$paragraph_instance = $widget_state['paragraphs'][$element['#delta']]['entity'];
$paragraph_type = $paragraph_instance->bundle();
// Determine which paragraph type is being embedded.
if ($paragraph_type == 'embedded_image_or_video') {
$dependee_field_name = 'field_image_or_video';
$selector = sprintf('select[name="%s[%d][subform][%s]"]', $paragraph_entity_reference_field_name, $element['#delta'], $dependee_field_name);
// Dependent fields.
$element['subform']['field_image']['#states'] = [
'visible' => [
$selector => ['value' => 'Image'],
],
];
$element['subform']['field_video']['#states'] = [
'visible' => [
$selector => ['value' => 'Video'],
],
];
}
}
}
/**
* Implements hook_form_alter().
*
* Example of conditional fields in node forms for Drupal 8.
*/
function nicaragua_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
if ($form_id == 'node_article_form' || $form_id == 'node_article_edit_form') {
$form['field_ image']['#states'] = [
'visible' => [
':input[name="field_image_or_video"]' => ['value' => 'Image'],
],
];
$form['field_ video']['#states'] = [
'visible' => [
':input[name="field_image_or_video"]' => ['value' => 'Video'],
],
];
}
}
@prineshaz
Copy link

prineshaz commented Jun 2, 2018

Thank you. Just a heads up, if you need to apply the above with paragraphs as Entity Reference fields, use the following widget hook:

function hook_field_widget_entity_reference_paragraphs_form_alter(&$elements, FormStateInterface $form_state, $context {
  // Your business logic here.
}

@willthemoor
Copy link

Good point above. To be specific, considering the hook name hook_field_widget_WIDGET_TYPE_form_alter:

  1. If you're using the "Paragraphs Classic" widget: WIDGET_TYPE = entity_reference_paragraphs
  2. If you're using the "Paragraphs Experimental" widget: WIDGET_TYPE = paragraphs

@shamsher327
Copy link

shamsher327 commented Sep 9, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment