YouTube ChannelSchedule a CallSubscribe for Updates

Chat

Aperçu

Le composant Avonni Chat apporte la messagerie en temps réel à vos pages Lightning. Utilisez-le pour alimenter la collaboration interne, les communications avec les clients ou tout flux de travail où des conversations en fil de discussion apportent de la valeur à Salesforce.

Démarrage rapide : Créez un Chat de Case en 2 minutes

Vous voulez voir le composant en action immédiatement ? Suivez ces 7 étapes pour ajouter un historique fonctionnel de commentaires de Case à une page d’enregistrement Case.

1

Créer un nouveau composant

  • Ouvrez l’ application Avonni Dynamic Components .

  • Cliquez sur le Nouveau bouton pour créer un nouveau composant.

  • Nom : Saisissez un nom (par ex., « Case Chat History »).

  • Objet de la page cible : Sélectionnez Case.

    • Important : Le paramètre Objet de la page cible indique au composant qu’il fonctionne dans le contexte d’un enregistrement Case, permettant à des variables comme {!RecordId} de fonctionner correctement.

2

Ajouter le composant au canevas

  • Depuis la Bibliothèque de composants (barre latérale gauche), recherchez Chat.

  • Faites glisser et déposez le Chat composant sur le canevas principal

3

Configurer la source de données à interroger

Nous devons récupérer les enregistrements Case Comment depuis Salesforce.

  • Sélectionnez le Chat composant sur le canevas.

  • Dans le panneau Propriétés (à droite), définissez Source de données sur Requête.

  • Objet : Sélectionnez CaseComment.

  • Filtre :

    • Cliquez sur Ajouter un filtre.

    • Champ : ParentId.

    • Opérateur : Égal.

    • Valeur : {!$Component.RecordId}.

    • Pourquoi : Cela garantit que nous ne chargeons que les commentaires pour la Case spécifique actuellement consultée.

  • Trier par : CreatedDate ASC (Du plus ancien au plus récent).

4

Mapper les champs de la requête

Connectez les champs renvoyés par votre requête aux attributs du composant Chat.

  • Faites défiler jusqu’à la section Mappages de données .

  • Contenu : Sélectionnez Body.

    • Remarque : Cela associe le texte réel du commentaire à la bulle de message.

  • Date : Sélectionnez CreatedDate.

Vérifiez l’aperçu : Le canevas doit maintenant afficher l’historique de conversation pour l’enregistrement de contexte. Si l’aperçu est vide, assurez-vous que le Contexte d’aperçu est défini sur une case depuis le panneau de débogage.

5

Configurer l’éditeur (Publisher)

Configurez la zone de saisie pour les nouveaux messages.

  • Faites défiler jusqu’au Publisher .

  • Mode : Définir sur Riche.

  • Libellé du bouton : Changez « Send » en Publier le commentaire.

  • Espace réservé : Saisissez Tapez une réponse....

6

Ajouter la logique « Enregistrer » (Interaction)

Rendez le bouton « Publier le commentaire » fonctionnel.

  • Cliquez sur le Onglet Interactions

  • Cliquez sur dans le panneau Propriétés..

    • Ajouter une interaction Sélectionnez Déclencheur :.

    • Lors de la publication d’un message Sélectionnez Action :.

    • Objet : Sélectionnez CaseComment.

  • Saisir des données d’enregistrement manuellement

    • Mappages de champs : ParentId : {$Component.RecordId}

    • (Associe le commentaire à cette Case). CommentBody : Message : Contenu

    • (Capture le texte que vous avez saisi).: Date de création

7

Message : Date

  • Cliquez sur Enregistrer et activer.

  • Enregistrer Utilisez le bouton Déployer

pour ajouter ce composant dynamique à votre page Lightning Case Salesforce réelle

Configuration

Sélectionnez le composant Chat sur le canevas pour accéder à ses propriétés dans le panneau Propriétés. La configuration consiste à définir d’où proviennent les messages, comment se comporte l’éditeur et comment gérer les nouveaux messages.

Se connecter aux données de message (Source de données) Vous pouvez remplir l’historique du chat en utilisant soit la manuelle Requête ou

méthode.

Option A : Source de données manuelle

  1. Utilisez ceci pour des affichages statiques ou du prototypage.

  2. Sélectionner la source de données : Choisissez Manuelle.

    • Configurer les ressources : Les ressources représentent les personnes ou entités impliquées dans le chat.

    • Libellé : Le nom affiché de la personne/utilisateur.

    • Source d’avatar : URL pour l’image de l’utilisateur. Icône de secours pour l’avatar : Un nom d’icône (par ex.,standard:user

    • ) à afficher si aucune image n’est disponible.

  3. Initiales de l’avatar : Texte à afficher (par ex., « JD ») si aucune image n’est disponible.

    • Configurer les messages : Créez les bulles de message spécifiques.

    • Auteur : Le nom ou l’ID de la ressource qui a envoyé le message. Type : Définir explicitement comme entrant (reçu) ou sortant

    • (envoyé).

    • Date : L’horodatage du message.

Contenu : Le corps textuel réel du message.

Option B : Source de données par requête

  1. Utilisez ceci pour récupérer dynamiquement des enregistrements depuis Salesforce (par ex., récupérer tous les commentaires liés à une Case). Requête.

  2. Sélectionner la source de données : Choisissez CaseCommentDéfinir la requête : Sélectionnez l’objet (par ex., ) et définissez des filtres (par ex.,ParentId égal à recordId

  3. ) pour récupérer les enregistrements corrects.

    • Mappages de données : Mappez les champs de votre requête à l’affichage du chat. Contenu : Sélectionnez le champ contenant le corps du message (par ex.,).

    • CommentBody CreatedDate).

Date : Sélectionnez le champ contenant l’horodatage (par ex.,

Paramètres généraux

Ces paramètres contrôlent le comportement global du composant de chat, y compris la façon dont les messages sont attribués et affichés.
Paramètre
Description

Exemple

ID de la ressource actuelle

ID de l’auteur du message ; détermine le positionnement envoyé vs reçu. Par défaut, correspond à l’utilisateur actuel si vide.

{!$User.Id}

Lecture seule

Masque l’éditeur ; les utilisateurs peuvent consulter mais pas envoyer

faux

Désactivé

Grise le composant ; empêche toute interaction

false

Format de la date du message

Comment les horodatages s’affichent sur les messages

"MMM d, yyyy h:mm a" → "15 janv. 2025 14:30"

Paramètres de l’éditeur

Ces paramètres contrôlent le comportement global du composant de chat, y compris la façon dont les messages sont attribués et affichés.
Paramètre
Description

Personnalisez la zone de saisie où les utilisateurs tapent de nouveaux messages.

ID de la ressource actuelle

ID de l’auteur du message ; détermine le positionnement envoyé vs reçu. Par défaut, correspond à l’utilisateur actuel si vide.

Mode

Lecture seule

Grise le composant ; empêche toute interaction

Espace réservé

Désactivé

Grise le composant ; empêche toute interaction

Libellé du bouton Publier

Format de la date du message

Comment les horodatages s’affichent sur les messages

Longueur maximale

Longueur minimale

10

Caractères requis avant l’envoi

Afficher le compteur de caractères

Afficher le compteur de caractères

Vrai

Position de la barre d’outils

Où apparaissent les outils de formatage

Haut

Catégories

  • Sélectionnez quels groupes d’outils de formatage apparaissent dans la barre d’outils en mode Riche :Police

  • : Options de famille et de taille de police.Texte

  • Body : Gras, italique, souligné, barré.

  • : Listes, alignement, retrait.Supprimer la mise en forme

  • : Effacer toute la mise en forme du texte sélectionné.En-tête

  • : Options de niveau de titre.Couleur

  • : Sélecteur de couleur du texte.Couleur de surlignage

: Sélecteur de couleur de surbrillance de fond.

Mots bloqués

Définissez des mots qui ne peuvent pas être inclus dans les messages publiés. Lorsque les utilisateurs tentent d’envoyer des messages contenant des mots bloqués, l’action de publication est empêchée.

Mises à jour en temps réel (Platform Events) Par défaut, le composant Chat se met à jour lorsque vous

publiez un message. Cependant, si un collègue ou un client publie une réponse pendant que vous regardez l’écran, vous ne la verriez généralement pas avant d’actualiser la page. Les Platform Events

résolvent ce problème. Ils permettent au composant Chat d’« écouter » les changements et de se mettre à jour instantanément lorsqu’un nouveau message est créé dans la base de données.

Comment activer le chat en temps réel publiez un message. Cependant, si un collègue ou un client publie une réponse pendant que vous regardez l’écran, vous ne la verriez généralement pas avant d’actualiser la page..

Par défaut, le chat ne se met à jour que lorsque vous publiez un message ou actualisez la page. Pour créer une expérience de « messagerie instantanée » où les réponses des autres apparaissent immédiatement, vous pouvez activer Source de données Ceci se configure dans les

  1. paramètres : Requête.

  2. Définir la source de données sur Développer Options avancées et localisez.

  3. Rafraîchissement de requête EMP Nom du canal : Saisissez le nom API de votre Platform Event (par ex.,).

  4. Chat_Notification__e Nom du champ clé : Saisissez le nom API du champ contenant l’ID de l’enregistrement (par ex.,).

RecordId__c Besoin d’aide pour configurer cela ? L’utilisation de cette fonctionnalité nécessite la création d’un Platform Event et d’un Flux déclencheur dans Salesforce. 👉

Lisez le guide d’installation complet : Comment configurer les mises à jour en temps réel

Configuration des interactions Par défaut, le composant Chat affiche des données. Pour le rendre fonctionnel (c.-à-d. enregistrer réellement un message lorsque l’utilisateur clique sur « Envoyer »), vous devez configurer.

une interaction

  1. Scénario : Création d’un enregistrement lors de la publication Accédez à l’onglet Interactions

  2. dans le panneau des propriétés. Ajoutez une nouvelle interaction avec le déclencheur.

  3. « Publier un nouveau message »

  4. Action : Sélectionnez Créer un enregistrement. Action :.

  5. Sélectionnez : CaseComment, Objet : Choisissez l’objet où les messages doivent être stockés (par ex.,FeedItem , ou un objet personnalisé Chat_Log__c

  6. ).

    • Mappages de champs : Mappez les données du composant Chat à votre objet Salesforce.

      • Exemple (Commentaire de Case) : ParentId : Mappez vers {!Record.Id}

      • (pour le lier à l’enregistrement courant). CommentBody : Mappez à l’attribut du composant Chat Value

      • (cela transporte le texte que l’utilisateur vient de saisir). IsPublished : Définissez une valeur constante de.

true

Description

Remarque : Une fois l’enregistrement créé via l’Interaction, la requête Chat (si configurée) se rafraîchira automatiquement pour afficher le nouveau message dans la chronologie

Journal de discussion du projetObjectif

1

: Créer une interface de chat sur un objet personnalisé « Project ». Cela permet à l’équipe du projet de discuter des mises à jour et d’enregistrer ces messages dans un objet personnalisé « Project Update ».

  • Ouvrez l’ application Avonni Dynamic Components .

  • Cliquez sur Nouveau.

  • Nom : Créer le composant

  • Saisissez « Project Team Chat ». Nom de la page cible : Sélectionnez votre objet personnalisé (par ex., manuelle Project).

    • Project__c Pourquoi : {!RecordId} Ceci est critique. Il indique au composant qu’il fonctionne dans le contexte d’un enregistrement Project, permettant l’utilisation de la

2

variable.

  • Depuis la Bibliothèque de composants (barre latérale gauche), recherchez Chat.

  • Faites glisser et déposez le Chat Ajouter le composant au canevas

3

composant sur le canevas.

Se connecter à la source de données

  • Nous devons interroger l’objet personnalisé où les messages seront stockés. Source de données :

  • Objet : Requête. Project_Update__c

  • Filtre : Project (Objet personnalisé). {!RecordId}.

    • Project__c égale

  • Trier par : CreatedDate ASC.

4

Filtre la liste pour n’afficher que les mises à jour liées à l’enregistrement Project en cours.

Mapper les données

  • Contenu : Contrairement aux objets standard, les objets personnalisés nécessitent un mappage explicite pour garantir que le nom et l’image de l’utilisateur s’affichent correctement. Message_Body__c

  • Date : CreatedDate

  • (champ Zone de texte enrichi) Nom de l’auteur :

  • CreatedBy.Name Avatar de l’auteur :

    • Project__c CreatedBy.SmallPhotoUrl

5

Configurer l’éditeur (Publisher)

Cela récupère dynamiquement la photo de profil Salesforce de l’utilisateur ayant publié la mise à jour

  • Configurez la saisie pour permettre un formatage riche, utile pour les rapports d’état de projet.

  • Mode : Riche

  • Espace réservé : « Partagez une mise à jour de projet... »

  • Libellé du bouton : « Publier la mise à jour »

6

Ajouter la logique « Enregistrer » (Interaction)

Mots bloqués : (Optionnel) Ajoutez des noms de code internes sensibles si nécessaire. Requête. Configurez le composant pour créer un nouveau

  • enregistrement lorsque le bouton est cliqué.Déclencheur d’interaction

  • : Publier un nouveau messageAction

  • : Créer un enregistrement Action :.

  • Sélectionnez : Créer: Requête.

  • Objet cible:

    1. ProjectMappages de champs ParentId :

      • : Mapper vers Contexte :

    2. Contrairement aux objets standard, les objets personnalisés nécessitent un mappage explicite pour garantir que le nom et l’image de l’utilisateur s’affichent correctement.Mappages de champs CommentBody :

      • : Mapper vers Relie la mise à jour au Project spécifique.

    3. (Capture le texte que vous avez saisi).: Enregistre le contenu saisi.

7

Message : Date

Mises à jour en temps réel (optionnel)

  1. Rafraîchissement de requête EMP Saisissez le nom API de votre Platform Event (par ex., Pour faire apparaître les messages instantanément pour tous les membres de l’équipe :

  2. Chat_Notification__e Saisissez le nom API du champ contenant l’ID de l’enregistrement (par ex.,.

(En supposant que vous ayez créé un Platform Event).

  • Considérations clésPlanification du modèle de données

  • : Pour le mode Requête, assurez-vous que vos objets Salesforce disposent des champs nécessaires pour stocker le contenu des messages, les horodatages et les informations d’auteur, ainsi que des relations de recherche vers les enregistrements parents.Identification des ressources

  • : L’ID de la ressource actuelle détermine le positionnement des messages. Pour les implémentations orientées client, réfléchissez à la manière dont vous identifierez les participants externes par rapport aux utilisateurs internes.Limites de caractères

  • : Sélecteur de couleur de surbrillance de fond. : Définissez des longueurs maximales appropriées en fonction des limites de champs de votre objet cible pour éviter la troncature des données.

  • : Passez en revue et mettez régulièrement à jour votre liste de mots bloqués pour maintenir des standards de communication sans être excessivement restrictif.Performance

: Pour les conversations avec un historique important, utilisez des filtres de requête pour limiter le nombre de messages chargés initialement, ou envisagez des stratégies de pagination pour les fils très actifs.

En résumé

Mis à jour

Ce contenu vous a-t-il été utile ?