Optimiser l'expérience utilisateur avec les #states des formulaires Drupal

Les #states (Système d'états) des formulaires dans Drupal permet de rendre nos éléments de formulaire plus dynamiques en fonction de l'interaction de l'utilisateur avec le formulaire. Contrairement à l'API State de Drupal, qui est destinée à la modélisation et au stockage de données, le système d'états des formulaires utilise JavaScript pour effectuer les manipulations sans Ajax.

#states, qu'est-ce que c'est ?

Les #states sont des propriétés simples que nous pouvons ajouter aux éléments de formulaire (à lire également notre article : La Form API de Drupal, Késako ?) pour les modifier en fonction de l'état d'autres éléments. Par exemple, nous pouvons contrôler la visibilité d'un élément de formulaire en fonction de la valeur sélectionnée par l'utilisateur sur un autre élément.
La particularité de ce comportement, côté client, est qu'il n'exige pas la rédaction de la moindre ligne de code JavaScript.

Et en pratique, comment utiliser #states ?

Le meilleur moyen de comprendre cela est de prendre un exemple. Imaginons que nous ayons ces deux éléments de formulaire :

$form['options'] = [
'#type' => 'checkboxes',
'#title' => $this->t('options'),
'#options' => [
'flight' => $this->t('flight'),
'rental_car' => $this->t('rental car'),
'hotel' => $this->t('hotel'),
],
];

$form['hotel_options'] = [
'#type' => 'container',
'#states' => [
'visible' => [
': input[name="options[hotel]"]' => ['checked' => true],
],
],
];

$form['hotel_options']['option_restaurant'] = [
'#type' => 'checkbox',
'#title' => $this->t('restaurant'),
];

$form['hotel_options']['option_spa'] = [
'#type' => 'checkbox',
'#title' => $this->t('spa'),
];

$form['flight_options'] = [
'#type' => 'container',
'#states' => [
'visible' => [
': input[name="options[flight]"]' => ['checked' => true],
],
],
];

$form['flight_options']['departure_date'] = [
'#type' => 'date',
'#title' => $this->t('departure date'),
];

$form['flight_options']['arrival_date'] = [
'#type' => 'date',
'#title' => $this->t('arrival date'),
];

Le formulaire de réservation a trois options : vol, location de voiture et hôtel. L'utilisateur peut cocher ou décocher chaque option selon ses besoins.
Pour les options d'hôtel, nous avons créé un conteneur avec des cases à cocher pour les options de restaurant et de spa.
La visibilité de ce conteneur est contrôlée en fonction de l'état de la case à cocher "Hôtel". Si elle est cochée, les options de restaurant et de spa sont visibles, sinon elles sont masquées.

Le code utilise les noms des champs de formulaire pour cibler des éléments spécifiques et leur appliquer des modifications en fonction des choix de l'utilisateur.
Par exemple, ":input[name='options[hotel]']" est utilisé pour faire référence à la case à cocher "Hôtel".

Mis à part le fait que nous pouvons rendre un élément visible ou invisible, nous pouvons également lui appliquer les états suivants :

• Enabled
• Disabled
• Required
• Optional
• Checked
• Unchecked
• Expanded
• Collapsed
• Visible
• Invisible

Quant aux conditions qui peuvent "déclencher" ces états, nous pouvons avoir les suivantes (à l'exception de "coché", que nous avons déjà vu) :

• Empty
• Filled
• Unchecked
• Expanded
• Collapsed
• Value
• Checked

En résumé, l'utilisation des #states des formulaires Drupal représente un outil puissant pour optimiser l'expérience utilisateur, offrant une personnalisation et une interactivité accrues. Grâce à cette fonctionnalité, les développeurs peuvent créer des formulaires plus conviviaux et adaptés aux besoins spécifiques de chaque utilisateur.

Des articles techniques sur Drupal, ça vous intéresse ? Je vous en propose 2 :

• Le cache Drupal : pour une meilleure gestion des performances !
• Comment créer des Tokens Custom dans Drupal ?

Source : Drupal
Crédit photo : SvetaZi