Comment améliorer l’ergonomie du module Paragraph dans le back office ?

Le module Paragraph Drupal

Le module paragraphe est un module qui permet de faire des groupes de champs Drupal répétables. Imaginons que l’on souhaite créer des slides avec une image, une légende et un lien. On ne peut pas facilement nativement le faire avec Drupal. Avec Paragraph, il faut simplement créer un type de paragraphe “slide” dans lequel on ajoute nos champs natifs Drupal : image, texte et lien.

On ajoute ensuite un champ paragraph a notre type de contenu. L'utilisateur peut ensuite ajouter autant de paragraphes qu'il le souhaite. Chaque paragraphe devient une slide. L'ergonomie est la même que pour les champs Drupal donc l'utilisateur s’y retrouve facilement.

Ergonomie

Le formulaire d’édition du contenu peut contenir beaucoup de paragraph qui contiennent eux même plusieurs champs. Cela rend le formulaire d’édition très long et difficile à lire. La première solution pour gérer ce problème est de mettre l’affichage des paragraphes replié par défaut. On a tout de suite une vue d’ensemble beaucoup plus à gérer.

Par défaut, cette vue affiche les champs qui sont dans le paragraphe. Ce n’est pas la plupart du temps pertinent pour l'utilisateur et prête à confusion.

Solution : Activer le mode preview et modifier le mode modification

On active l’affichage “preview” dans la gestion de l'affichage du formulaire du type de contenu qui contient ce paragraphe. On modifie également le mode modification que l'on met sur "fermé" : le paragraphe sera donc replié par défaut. 

Enable preview mode in content type

Activer le mode preview dans le type de paragraphe

Il faut ensuite aller dans la gestion du type de paragraphe, onglet "gérer l’affichage". Ici, on a un paramètre d’affichage personnalisé qui n’est pas activé par défaut : preview. Il suffit simplement de l’activer et de glisser un champ texte ou image en fonction de ce que l’on souhaite.

mode preview

Résultat

Le résultat est nettement plus ergonomique. Sur cet exemple, on n'affiche que l’image qui est affichée en front. L'utilisateur peut voir directement de quel paragraphe il s’agit et peut les ordonner facilement.