Comment créer des champs dépendants dans l’entité de paragraphe à l’aide de hooks dans Drupal 9 et 10

Introduction

Lorsque vous travaillez avec des formulaires complexes, vous disposez souvent de champs dont l’état dépend des valeurs d’entrée d’autres champs du formulaire. Par exemple, vous pouvez disposer d’une liste de sélection d’options, dont les options dépendent de la valeur sélectionnée pour un autre champ.

Dans ce blog, je présente une étude de cas de mon projet Drupal où j’ai dû réaliser des champs dépendants dans Paragraph Entity. Ainsi, dans l’entité paragraphe, les champs doivent utiliser le widget « Sélectionner la liste ». Lors de la sélection des options dans la liste de sélection, nous devons afficher ou masquer les autres champs correspondants dans la même entité de paragraphe.

Énoncé du problème

Nous avons déjà le module Dependent Field, qui est un module contribué et fournit des fonctionnalités de champ dépendant. Mais ce module ne prend pas en charge les entités Paragraph. Nous utilisons donc des hooks pour résoudre le problème.

Exigences initiales

Nous devons installer le module Paragraph, qui est un module contribué qui nous aide à proposer de nouvelles méthodes de création de contenu. Il vous permet de rendre les choses plus propres afin que vous puissiez donner plus de pouvoir d’édition à vos utilisateurs finaux.

Pour cet exemple, nous avons créé un nom d’entité de paragraphe – une galerie qui contient 3 champs. Le premier champ sera une liste de sélection avec deux options : image et document. Les autres champs seront des champs d’image et de fichier. Nous intégrons le paragraphe galerie dans le type de contenu Basic Page pour représenter la démo. Vous trouverez ci-dessous les captures d’écran du paragraphe et du type de contenu.

Écran 1 – Entité de paragraphe avec des champs.

Écran 2 – Nous avons créé un champ de référence d’entité pour lier les paragraphes dans le type de contenu Page de base pour la démo.

Écran 3 – Lorsque nous ajouterons une page de base, elle ressemblera à celle ci-dessous.

Maintenant, nous devons créer un champ dépendant tout en sélectionnant l’option dans la liste de sélection.

Dans Drupal9nous utilisons hook_field_widget_WIDGET_TYPE_form_alter dans notre module personnalisé.

Vous trouverez ci-dessous un code de référence d’un module personnalisé.

/**
* @file
* Dependent fields module.
*/


use Drupal\Core\Form\FormStateInterface;


/**
* Implements hook_field_widget_WIDGET_TYPE_form_alter().
*/
function demo_module_field_widget_paragraphs_form_alter(&$element, FormStateInterface $form_state, $context) {
 /** @var \Drupal\field\Entity\FieldConfig $fieldDefinition */
 $fieldDefinition = $context['items']->getFieldDefinition();
 $paragraphEntityReferenceFieldName = $fieldDefinition->getName();


 if ($paragraphEntityReferenceFieldName == 'field_attach_gallery') {
   /** @see \Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget::formElement() */
   $widgetState = \Drupal\Core\Field\WidgetBase::getWidgetState($element['#field_parents'], $paragraphEntityReferenceFieldName, $form_state);


   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraphInstance = $widgetState['paragraphs'][$element['#delta']]['entity'];
   $paragraphType = $paragraphInstance->bundle();


   // Determine which paragraph type is being embedded.
   if ($paragraphType == 'gallery') {
     $dependeeFieldName="field_choose_type";
     $selector = sprintf('select[name="%s[%d][subform][%s]"]', $paragraphEntityReferenceFieldName, $element['#delta'], $dependeeFieldName);
    // Dependent fields.
     $element['subform']['field_document']['#states'] = [
       'visible' => [
         $selector => ['value' => 'file'],
      ],
     ];
     $element['subform']['field_image']['#states'] = [
       'visible' => [
         $selector => ['value' => 'image'],
       ],
     ];
   }
 }
}

Dans Drupal10nous utilisons hook_field_widget_single_element_paragraphs_form_alter dans notre module personnalisé.

Vous trouverez ci-dessous un code de référence d’un module personnalisé.

/**
* Implements hook_field_widget_single_element_paragraphs_form_alter().
*/
function demo_module_field_widget_single_element_paragraphs_form_alter(&$element, FormStateInterface $form_state, $context) {
 /** @var \Drupal\field\Entity\FieldConfig $fieldDefinition */
 $fieldDefinition = $context['items']->getFieldDefinition();
 $paragraphEntityReferenceFieldName = $fieldDefinition->getName();


 if ($paragraphEntityReferenceFieldName == 'field_attach_gallery') {
   /** @see \Drupal\paragraphs\Plugin\Field\FieldWidget\ParagraphsWidget::formElement() */
   $widgetState = \Drupal\Core\Field\WidgetBase::getWidgetState($element['#field_parents'], $paragraphEntityReferenceFieldName, $form_state);


   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraphInstance = $widgetState['paragraphs'][$element['#delta']]['entity'];
   $paragraphType = $paragraphInstance->bundle();


   // Determine which paragraph type is being embedded.
   if ($paragraphType == 'gallery') {
     $dependeeFieldName="field_choose_type";
     $selector = sprintf('select[name="%s[%d][subform][%s]"]', $paragraphEntityReferenceFieldName, $element['#delta'], $dependeeFieldName);
    // Dependent fields.
     $element['subform']['field_image']['#states'] = [
       'visible' => [
         $selector => ['value' => 'image'],
      ],
     ];
     $element['subform']['field_document']['#states'] = [
       'visible' => [
         $selector => ['value' => 'file'],
       ],
     ];
   }
 }
}

Après la mise en œuvre des hooks ci-dessus dans les versions respectives, nous pouvons obtenir la fonctionnalité de champs dépendants. Ainsi, lorsque vous sélectionnez une image dans la liste de sélection, l’affichage du champ d’image et le champ de fichier seront masqués, et si vous sélectionnez l’option de fichier dans la liste de sélection. sélectionnez la liste, puis le champ du document affichera un champ d’image qui sera masqué.

Conclusion

Drupal fournit le meilleur moyen d’utiliser des hooks pour apporter quelques modifications aux fonctionnalités existantes. À l’aide de quelques configurations, nous pouvons obtenir rapidement des formulaires complexes et des états de dépendance de champ avec d’autres valeurs de champ. Ici, nous fournissons des hooks pour Drupal 9 et Drupal 10 uniquement. Peut-être que dans Drupal 11 ou version ultérieure, les modifications sont apportées.

Faites-nous savoir si vous avez des questions et n’hésitez pas à nous contacter via les commentaires.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE