Autorisez vos utilisateurs à choisir des entités Drupal avec le module Entity Browser

Dans cet article de blog, je vais vous montrer comment permettre aux utilisateurs de Drupal de sélectionner des entités à l'aide du module "Navigateur d'entités".

Ce didacticiel a été demandé par un client OSTraing qui construit un site de critiques de livres. Le client souhaitait utiliser Entity Browser afin de pouvoir créer cette fonctionnalité :

• Le site propose deux types de contenu : les livres et les critiques de livres.
• Lorsque les utilisateurs créent une nouvelle critique de livre, ils peuvent utiliser une vue pour rechercher et sélectionner le livre qu'ils révisent. Par exemple, s'ils examinent "Guerre et paix", ils peuvent rechercher le nœud "Guerre et paix" existant.
• Lorsque la critique de livre est publiée, le nœud sélectionné sera intégré à la critique de livre.

Cette demande client peut être réalisée à l'aide du module Entity Browser. Ce module fournit un navigateur que les utilisateurs de Drupal peuvent utiliser pour intégrer des nœuds dans d'autres parties de leur site.

Ce didacticiel vous guidera tout au long de l'exercice de création de site et vous montrera comment utiliser le module Entity Browser.

Étape 1. Installez les modules requis

Pour utiliser Entity Browser, vous devez installer les modules suivants : Entity Browser et Chaos Tools.

Utilisez votre méthode préférée pour télécharger et installer ces modules. J'utilise Composer :

 composer install drupal/entity_browser

 composer install drupal/ctools

Cela placera les modules dans votre installation Drupal. Après cela, cliquez sur Étendre , recherchez les deux modules, activez-les et cliquez sur Installer .

Étape 2. Créer les termes de taxonomie

Dans cet exemple, les livres sont classés par genre, nous aurons donc besoin d'un vocabulaire appelé "Genre de livre".

• Cliquez sur Structure > Taxonomie > Ajouter du vocabulaire.
• Donnez au vocabulaire un nom propre et une description.
• Cliquez sur Enregistrer.

• Dans l'onglet Liste , cliquez sur Ajouter un terme.

Ajoutez les termes suivants :

• Aventure
• Livre de recettes
• Drame
• Fantaisie
• Horreur

Étape 3. Créer le type de contenu Livre

Ensuite, nous allons créer le type de contenu pour nos livres. Nous utiliserons la taxonomie Book Genre que nous avons créée à l'étape précédente.

• Cliquez sur Structure > Types de contenu > Ajouter un type de contenu.
• Créez un type de contenu appelé Livre et ajoutez ces champs avec leurs paramètres par défaut :

• Cliquez à nouveau sur Ajouter un champ .
• Dans la liste déroulante sous Référence , sélectionnez Terme de taxonomie et attribuez-lui une étiquette appropriée.
• Cliquez sur Enregistrer et continuer.

• Laissez le Nombre de valeurs autorisé à 1 et cliquez sur Enregistrer les paramètres du champ
• Faites défiler vers le bas de l'écran Modifier et choisissez le vocabulaire que vous souhaitez référencer dans votre type de contenu. Dans ce cas : genre de livre
• Cliquez sur Enregistrer les paramètres

• Cliquez sur l'onglet Gérer l'affichage du formulaire .
• Recherchez le champ Genre de livre et changez son widget en Cases à cocher/boutons radio.
• Cliquez sur Enregistrer.

Étape 4. Créer le contenu du livre

Il est maintenant temps de créer 5 à 10 livres et d'attribuer chacun d'eux à un genre particulier.

• Cliquez sur Contenu > Ajouter du contenu > Réserver.

Étape #5. Créer une vue

Après avoir créé un exemple de contenu, vous êtes maintenant prêt à créer la vue. Cette vue sera affichée sur le navigateur d'entités afin que vous puissiez choisir un livre pendant que vous créez une critique de livre.

• Cliquez sur Structure > Vues > Ajouter une vue.
• Créez une vue avec le titre Livres disponibles.
• Afficher le contenu de type Livre.
• Laissez les paramètres Page et Bloc décochés.
• Cliquez sur Enregistrer et modifier.

• Cliquez sur le bouton Ajouter sous la section AFFICHAGES .
• Sélectionnez Navigateur d'entités.

• Cliquez sur Réorganiser à côté des critères SORT et supprimez le critère Contenu : créé sur desc .
• Cliquez sur Appliquer.
• Cliquez sur AJOUTER à côté des critères FILTRE et sélectionnez le champ Genre de livre .
• Cliquez sur Ajouter et configurez les critères de filtre.

• Assurez-vous que le vocabulaire du genre de livre est sélectionné.
• Changez le type de sélection en Liste déroulante.
• Cliquez sur Appliquer et continuez.

• Cochez Exposer ce filtre aux visiteurs pour leur permettre de le modifier.
• Assurez-vous que l' Opérateur est sélectionné comme Est l'un des.
• Cliquez sur Appliquer.

• Ajoutez le champ Titre aux critères SORT .
• Laissez la configuration par défaut Trier par ordre croissant et cliquez sur Appliquer.

Cela présentera les livres dans la vue par ordre alphabétique. Vous devez insérer quelques champs supplémentaires à afficher sur la vue. Pour le moment, seul le titre du nœud est disponible.

• Cliquez sur le bouton Ajouter dans la section Champs .
• Recherchez le champ de couverture du livre et cliquez sur Ajouter et configurer des champs.

• Sélectionnez Style d'image (Miniature 100x100) et cliquez sur Appliquer.
• Cliquez à nouveau sur Ajouter pour ajouter le champ de formulaire de sélection en bloc du navigateur d'entités .
• Cliquez sur Ajouter et configurez les champs.

• Cliquez sur Appliquer.

L'utilisation de ce champ est obligatoire si vous souhaitez utiliser Entity Browser, faites donc particulièrement attention à cela.

• Modifiez le format de la vue, par exemple en Grille.
• Cliquez deux fois sur Appliquer .

La configuration de la vue dans l'interface utilisateur des vues doit ressembler à l'image ci-dessous. Cliquez sur Enregistrer pour enregistrer la vue.

Étape #6. Configurer le module Navigateur d'entités

Dans cette étape, nous allons choisir le paramètre du module clé de ce didacticiel : Navigateur d'entités.

• Cliquez sur Configuration > Navigateurs d'entités

• Cliquez sur le navigateur Ajouter une entité.
• Donnez-lui une étiquette appropriée, par exemple Navigateur de livres.
• En tant que plugin d'affichage, sélectionnez iFrame.
• Cliquez sur Suivant.

• Cochez Ouvrir automatiquement le navigateur d'entités et cliquez sur Suivant.

• Cliquez sur Suivant deux fois de plus jusqu'à ce que vous arriviez à la page de configuration des widgets .
• Cliquez sur la liste déroulante afin de sélectionner le plugin View widget.
• Modifiez le libellé du widget, par exemple : "Choisissez un livre".
• Sélectionnez la vue que vous avez configurée à l'étape 5.
• Cliquez sur Terminer.

Étape #7. Créer le type de contenu Critique de livre

Notre site est presque terminé. Avant de terminer, nous devons créer le type de contenu que les critiques de livres peuvent utiliser :

• Cliquez sur Structure > Types de contenu > Ajouter un type de contenu.
• Nommez ce type de contenu Critique de livre.
• Ajoutez un nouveau champ, dans la section Référence , choisissez Contenu.
• Donnez à ce champ une étiquette appropriée, par exemple, Le livre.
• Cliquez sur Enregistrer et continuer.
• Dans l'option Type d'élément à référencer , sélectionnez Contenu.
• Cliquez sur Enregistrer les paramètres du champ.

• Cliquez sur Enregistrer les paramètres.
• Cliquez sur l'onglet Gérer l'affichage du formulaire pour ce type de contenu.
• Localisez le champ de référence et remplacez son widget par Navigateur d'entité.
• Cliquez sur la roue dentée à droite et sélectionnez Navigateur de livres (ou quel que soit le nom que vous avez donné au navigateur que vous venez de créer à l'étape 6.
• Cliquez sur Mettre à jour.
• Cliquez sur Enregistrer.

Notez que vous avez également la possibilité d'afficher uniquement l' étiquette Entité ou l' entité rendue complète . Vous pouvez utiliser des modes d'affichage (par exemple, Teaser) pour présenter l'entité sur ce nouveau type de contenu de critique de livre .

Étape #8. Créer les critiques de livres

Maintenant, notre site est presque prêt à être utilisé. Créons une critique de livre et voyons si tout fonctionne correctement.

• Cliquez sur Contenu > Ajouter du contenu > Critique de livre.
• Donnez à ce nœud un titre et des textes de corps appropriés.
• Faites défiler plus bas et vous trouverez une section réduite appelée LE LIVRE (c'est le nom du champ).
• Cliquez sur ce champ et vous verrez le navigateur d'entités où vous pourrez sélectionner le livre auquel vous faites référence dans cette critique de livre.
• De plus, il y a un filtre exposé en haut pour que vous puissiez sélectionner des livres appartenant à un seul genre.
• Sélectionnez un genre et cliquez sur Appliquer.

Le navigateur ne vous montrera que les livres de ce genre.

• Sélectionnez un livre et cliquez sur Sélectionner des entités.

• Après avoir intégré l'entité, cliquez sur Enregistrer et vous verrez l'entité de livre référencée sur le nœud de critique de livre.

Ce tutoriel a démontré la puissance du module "Entity Browser" pour Drupal 8. J'espère qu'il vous a plu. Merci d'avoir lu!