Image mise en avant pour l'article

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

23 mai 2023
Drupal
Dans Drupal, grâce aux #states des formulaires, il est très simple de personnaliser, de fluidifier vos formulaires et de les adapter à vos utilisateurs. Mais alors, comment faire ?


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.

Comment optimiser l'expérience utilisateur grâce aux #states des formulaires Drupal. Sur la photo, nous voyons une femme de dos qui renseigne un formulaire sur son smartphone

#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 :

 

Source : Drupal
Crédit photo : SvetaZi

Image mise en avant pour l'article
Vivien Barbeau
Développeur Web
Webinar
Drupal 10, qu'est-ce qui change concrètement ?
Voir le webinar !
Vous maitrisez la technologie Drupal et vous souhaitez participer à une aventure humaine ?
Adimeo recrute un Développeur Drupal Senior capable d’encadrer des projets et d’accompagner des développeurs juniors...
Voir notre offre d'emploi !