Créer une section de commentaires et de réponses

Introduction

Créez une section où les utilisateurs peuvent laisser des commentaires ou des notes et recevoir des réponses. Ceux-ci seront organisés par date de publication et chaque commentaire sera identifié par le nom de connexion de l’utilisateur, son icône utilisateur ainsi que la date et l’heure de publication. Les commentaires et les réponses pourront être modifiés ou supprimés exclusivement par leur auteur. Si l’un est modifié, une étiquette sera affichée, et une infobulle indiquera la date de la dernière modification.

Avant de commencer

Pour pouvoir ajouter l’image utilisateur à côté de l’auteur du commentaire, il doit y avoir un champ image dans l’Aggregate « user ». Pour en savoir plus sur la façon de l’ajouter, consultez le guide sur Integrate a User Image Feature.

Étapes à suivre

1. Configurer l’entité Comment et les champs

Commencez par un nouvel onglet dans la page de détail de vos comptes. Dans cet exemple, il s’intitule « comments ». Créez un nouveau champ nommé « comments » de type « new Entity ». Le nom de l’Entity sera « comment » et il s’agit d’une collection. Ensuite, ajoutez les champs : « content » (text), « publishDate » (date & time) et « author » (user).

2. Créer la commande de création de commentaire

À partir du dossier « command » sous l’Aggregate Account, utilisez « add entity create command » pour générer la commande de création. À la deuxième étape de l’assistant, ajoutez uniquement « content » et définissez-le comme champ obligatoire. Dans le dossier « mutation », ajoutez « author » (type : current user) et « publishDate » (type : current date & time – now).

Glissez-déposez le champ « comments » dans l’onglet de la page de détail et insérez la commande de création au-dessus du repeater.

Passez en Live Mode pour créer quelques commentaires.

3. Ajouter une fonction de réponse aux commentaires

Pour donner aux utilisateurs la possibilité de répondre au commentaire de quelqu’un d’autre, ajoutez un nouveau champ dans l’Entity comment. Le nom du champ doit être « replies », de type « comment » et être une collection. En utilisant « comment » comme type, les champs de l’Entity « comments » seront également utilisés dans ce champ « replies ».

Pour ajouter une commande de création à nos réponses, utilisez « add Entity create command » à partir du dossier command de la première Entity « comment ». Ensuite, ajoutez les paramètres et la mutation comme à l’étape 2.

Après avoir regroupé le champ « date and time » et le champ « author », en leur appliquant un « item spacing » et en choisissant un « dash » comme séparateur d’éléments, il est temps d’ajouter l’option de réponse au repeater « comment ».

Glissez-déposez l’Entity « replie » au bas du premier repeater. Pour créer un texte d’action de lien, ajoutez un composant « text » à gauche de la boîte contenant ces deux champs. Ensuite, changez la valeur du texte pour « reply », changez sa couleur en bleu et soulignez-le. Et ajoutez un comportement « execute a command » pour associer votre commande de création au texte.

Passez en Live Mode pour le tester.

4. Organiser les commentaires par date de publication

Pour organiser les commentaires par date de publication, ajoutez un nouveau comportement « set component data » au repeater. Changez-le pour « filter », puis « add order by » « publishDate » avec « descending » comme direction de tri.

5. Afficher les images utilisateur avec les commentaires et les réponses

Glissez-déposez le champ image utilisateur à côté du nom de l’auteur du commentaire. Pour afficher une image de remplacement lorsque l’utilisateur n’a pas d’image, allez à l’onglet Attribute, cliquez sur « browse for image » et sélectionnez votre image. Pour redimensionner le placeholder à une taille raisonnable, allez à l’onglet « style » et supprimez le style par défaut. Ensuite, ajoutez 20 px en « width » et en « height ».

Pour obtenir l’image utilisateur de l’auteur du commentaire, ajoutez un « set component data » au champ image, définissez-le sur le type « field » et sélectionnez le champ « author » dans le menu déroulant. L’image de l’utilisateur remplacera celle du placeholder, sauf si certains auteurs n’ont pas encore d’image utilisateur.

Pour obtenir le même rendu visuel pour les réponses, dupliquez simplement le champ image et glissez-le à côté du nom de l’auteur dans le repeater « replies ».

6. Implémenter les fonctionnalités de modification et de suppression pour les commentaires

Puisque nos « replies » sont une Entity de type « comment », il n’est pas nécessaire de créer les commandes. L’Entity « replies » utilisera les mêmes commandes que celles pour « comments ». Glissez-déposez simplement ces 2 commandes, dans un « contextual menu button », pour chaque repeater.

Pour permettre uniquement à l’auteur d’un commentaire ou d’une réponse de le « edit » et de le « delete », ajoutez une précondition à chacune de ces commandes.

Name: Author

Operator: Equal

currentUser

7. Suivre et afficher les dates de dernière modification des commentaires

Pour suivre la date de la dernière modification d’un commentaire ou d’une réponse, ajoutez un nouveau champ sous l’entité « comments » pour « UpdatedPublishDate », de type « date & time » et ajoutez ce nouveau champ comme mutation à la commande « edit ».

Ensuite, glissez-déposez un composant « text » à côté du champ « publishedDate ». Mettez le texte en gras, entrez « edited » comme valeur et cette ligne de code JavaScript dans la section Tooltip :

data.updatedPublishDate?.format('LLL')

Pour afficher ce texte uniquement après une modification du commentaire ou de la réponse original, ajoutez un comportement « show/hide » avec « updatedPublishDate » « is not empty » comme critère de précondition.

À partir de ce moment, toutes les fonctionnalités listées dans la section « context » de ce guide ont été ajoutées.

Après avoir appliqué un peu de style, la section commentaires pourrait ressembler à ceci :

Conclusion

La section commentaires et réponses permet aux utilisateurs de laisser des commentaires, de recevoir des réponses et de les gérer avec des options de modification et de suppression. En incorporant des fonctionnalités comme le tri par date de publication, les images utilisateur et les étiquettes de dernière modification, cette section améliore l’interactivité et offre une organisation claire des commentaires et des conversations des utilisateurs.