Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Créer une application d'éditeur enrichi

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • répertorier les interfaces et les événements disponibles dans la plate-forme d'applications d'éditeur enrichi ;
  • créer de toutes pièces une application d'éditeur enrichi ;
  • configurer des applications d'éditeur enrichi dans une communauté.

Étape 1 Téléchargez votre icône et obtenez son identifiant de fichier

Icônes d'applications d'éditeur enrichi dans l'éditeur de questions

Pour pouvoir afficher une icône dans l’éditeur de fil et l’intégrer à votre application, vous avez besoin de l’ID fileAsset de l’icône.

Vous utilisez l’ID fileAsset lorsque vous créez l’entité ChatterExtension. Ajouter l’ID fileAsset à ChatterExtension vous permet d’archiver le fichier d’icône avec votre application.

Voici comment importer l’icône et obtenir son ID fileAsset.

Remarque

Remarque

L’infrastructure Lightning Component comprend deux modèles de programmation, Lightning Web Components et Aura. Dans ce module, nous construisons des applications d’éditeur enrichi à l’aide d’Aura.

  1. Téléchargez votre fichier d'icône sur Salesforce.
  2. Copiez l'ID du fichier.
    Remarque

    Remarque

    Vous pouvez obtenir l'ID du fichier à partir des détails du fichier dans Salesforce. Accédez à la page Fichiers et affichez les détails du fichier. Copiez l'ID du fichier à partir de l'URL de votre navigateur. C'est un long numéro, se présentant comme 069R00000003roQ.

  3. Accédez à Workbench et obtenez la valeur de id sous fileAsset.
    1. Dans l'explorateur REST, sélectionnez Publier et entrez le chemin d'accès : /services/data/v43.0/connect/files/[file_ID]/asset
    2. Pour le champ [file_ID], entrez l'ID du fichier que vous avez copié à l'étape 2.
    3. Dans le corps de la requête, entrez {}.
    4. Cliquez sur Exécuter.

      Un ID fileAsset dans Workbench

    5. Développez le nœud fileAsset, copiez la valeur donnée pour id et collez-la quelque part pour un utilisateur ultérieur.

Étape 2 Créez des composants Lightning pour une composition et un rendu

Lorsqu'un membre de la communauté clique sur l'icône d'une application d'éditeur enrichi, l'action provoque l'ouverture d'une fenêtre modale de composition. La fenêtre modale contient un composant Lightning. Le composant Lightning permet à l'utilisateur de sélectionner, de rechercher ou de générer quelque chose. Libre à vous de personnaliser ce composant pour votre cas d'utilisation.

Voyons comment une entreprise utilise la plate-forme d'applications d'éditeur enrichi pour joindre des requêtes aux publications et aux questions.

Étude de cas : Capricorn

L'entreprise Capricorn vend du café et du matériel haut de gamme pour le préparer, et se félicite de l'excellence de son service client. L’un de ses secrets réside dans la création d’une communauté destinée aux agents du service client, qui leur permet de discuter des requêtes en cours et de collaborer à la recherche de solutions. Capricorn souhaite développer une application d'éditeur enrichi pour joindre des requêtes aux publications et aux questions. Elle veut donner à ses agents la possibilité de tirer parti de solutions anciennes pour résoudre rapidement des problèmes actuels. Voici ce qu'elle a mis en œuvre.

A. Créez le premier composant Lightning

Créez un composant Lightning qui étend l'interface Lightning Lightning:availableForChatterExtensionComposer. Le composant de composition utilise cette interface.

L’équipe de développeurs de Capricorn utilise une itération aura pour afficher les éléments de la liste dans le code du composant. Voici le code de composant Lightning.

<aura:component implements="lightning:availableForChatterExtensionComposer" controller="caseController">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <aura:attribute name="items" type="List" description="Contains a list of items for user to select."/>
    
    <div class="container">
        <aura:iteration items="{!v.items}" var="item" indexVar="index">
            <div class="itemContainer" onclick="{!c.selected}">
                <div class="itemLeft">
                	<img class="itemIcon" src="https://login.salesforce.com/logos/Standard/record/logo.svg"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!item.title}</div>
                	<div class="itemDescription">Case Number: {!item.caseNo}</div>
                </div>
            </div>
        </aura:iteration>
    </div>
</aura:component>

L'équipe Capricorn effectue une requête Apex dans la fonction init du contrôleur pour extraire des informations de requête de support pour la liste de sélection. Voici le code du contrôleur associé au composant Lightning.

({
	init : function(cmp, event, helper) {
        var action = cmp.get("c.getCases");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var caseList = [];
                var response = response.getReturnValue();
                for (var i=0;i<response.length;i++) {
                    caseList.push({
                        "title": response[i].Subject,
                        "caseNo": response[i].CaseNumber
                    })
                }
                cmp.set("v.items", caseList);
            }
        });
        $A.enqueueAction(action);
	},
    
    selected: function(cmp, event, helper) {
        var selectedItem = helper.getSelectedItem(cmp, event);
		var compEvent = cmp.getEvent("sendChatterExtensionPayload");
		compEvent.setParams({
			"payload" : helper.getPayload(selectedItem),
			"extensionTitle" : helper.getTitle(selectedItem),
			"extensionDescription" : helper.getDescription(selectedItem)
		});
		compEvent.fire(); 
    }
})

Voici le code d'assistance à utiliser avec le contrôleur.

({  
    getSelectedItem: function(cmp, event) {
        var clicked = event.currentTarget;
        var parent = clicked.parentElement;
        var total = parent.children.length;
        var selectedIndex = -1;
        for(var i=0; i<total; i++) {
            if(clicked === parent.children.item(i)) {
                selectedIndex = i;
            }
            $A.util.removeClass(parent.children.item(i), "selected");
        }
        $A.util.addClass(clicked, "selected");
        
        var selectedTh = cmp.get("v.items")[selectedIndex];
        return selectedTh;
    },
    
    getPayload: function(item) {
        return item;
    },
    
    getTitle: function(item) {
        return item.title;
    },
    
    getDescription: function(item) {
        return item.caseNo;
    }
})
Conseil

Conseil

Voici une manière d'écrire un appel Apex pour la fonction getCases.

public class caseController {
    
    @AuraEnabled
    public static List<Case> getCases() {
       List<Case> cases = [SELECT AccountId,CaseNumber,Subject,Description,Id FROM Case ORDER BY CreatedDate ASC NULLS FIRST LIMIT 20];
       return cases;
    }
}

Vous pouvez mettre en œuvre votre propre méthode de sélection destinée aux utilisateurs. Vous pouvez utiliser n'importe quelle logique dans Apex pour obtenir des données intelligentes ou actualisées à l'aide de services internes ou tiers pour créer de puissantes applications d'éditeur enrichi.

L'important est de s'assurer qu'un clic de l'utilisateur déclenche l'événement aura lightning:sendChatterExtensionPayload dans le code du contrôleur. Dans l'exemple de code de Capricorn, l'équipe a configuré l'événement dans la fonction selected. La définition de l'événement dans la fonction selected envoie la charge de travail à associer à l'élément de fil lorsque l'utilisateur effectue une sélection.

L'équipe définit les métadonnées extensionTitle et extensionDescription à l'aide de fonctions d'assistance à associer à la charge de travail. Ces métadonnées sont destinées aux cas d'utilisation non Lightning, tels que les notifications par e-mail ou la vue classique. Si vous le souhaitez, vous pouvez également ajouter une URL de miniature.

Voici une fenêtre modale avec un titre et des miniatures.

Affiche les éléments dans un composant de composition

La plate-forme d'applications d'éditeur enrichi comporte également les boutons Ajouter et Annuler. Dans l'image précédente, le bouton Ajouter est désactivé. Salesforce active le bouton Ajouter uniquement une fois que l'événement lightning:sendChatterExtensionPayload est déclenché avec une charge de travail non vide. Si l'événement est déclenché avec une charge de travail vide, le bouton reste désactivé.

Bouton Ajouter activé

B. Créez le second composant Lightning

Ensuite, l'équipe Capricorn crée un composant Lightning qui étend l'interface Lightning Lightning:availableForChatterExtensionRenderer. Cette interface restitue la charge de travail sélectionnée dans l'éditeur lorsque FeedItem est restitué. Il y a deux attributs essentiels dans cette interface : variant et payload. L'attribut variant vous permet de décider de la manière dont quelque chose est restitué en fonction de la prévisualisation de l'application sélectionnée dans l'éditeur ou du rendu dans FeedItem. L'attribut payload est l'objet JavaScript sélectionné par l'utilisateur dans le composant de composition.

<aura:component implements="lightning:availableForChatterExtensionRenderer">
    
    <div class="container">
        <a target="_blank" href="{!v.payload.url}">
            <div class="{! (v.variant == 'FEED' ? 'itemContainerBorder' : '') + ' itemContainer'}">
                <div class="itemLeft">
                    <img class="itemIcon" src="{!v.payload.icon}"></img>
                </div>
                <div class="itemRight">
                    <div class="itemTitle">{!v.payload.title}</div>
                    <div class="itemSubtitle">{!v.payload.subtitle}</div>
                    <div class="itemDescription">Case Number: {!v.payload.caseNo}</div>
                </div>
            </div>
        </a>
    </div>

</aura:component>

Capricorn utilise la variante FEED pour décider la classe CSS à utiliser. L'utilisation de FEED indique à Salesforce de restituer l'application d'éditeur enrichi dans un FeedItem. Pour restituer l'application dans l'éditeur, utilisez la variante PREVIEW. Les informations de charge de travail indiquent la requête à restituer. Dans cet exemple, la charge de travail est statique. Or, vous pouvez également utiliser des contrôleurs Apex côté serveur pour obtenir des informations dynamiques en direct dans votre composant de rendu.

Voici à quoi la charge de travail ressemble lors d'une prévisualisation dans l'éditeur (PREVIEW) :

Aperçu d'une charge de travail d'application d'éditeur enrichi

Voici à quoi ressemble la charge de travail dans le dernier élément de fil restitué (FEED) :

Charge de travail d'application d'éditeur enrichi publiée avec un élément de fil

Étape 3 Créez une application d'éditeur enrichi dans Workbench

Maintenant que vous avez créé les composants Lightning et que vous disposez de l’ID fileAsset, vous pouvez élaborer l’application d’éditeur enrichi dans Workbench.

Accédez à Workbench et insérez un objet ChatterExtension (Workbench > Données > Insérer > ChatterExtension). Associez ensuite toutes les valeurs de vos composants aux champs ChatterExtension.

Conseil

Conseil

Une des manières d'obtenir des valeurs de composant consiste à accéder à la configuration et à rechercher des composants Lightning. Cliquez sur un composant répertorié pour afficher ses détails. Copiez l'ID du composant depuis l'URL du navigateur.

L'objet ChatterExtension

  • Indiquez l'ID du composant Lightning pour le composant de composition.
  • Ajoutez du texte pour l'en-tête modal.
  • Ajoutez un texte de survol pour l'icône de l'application (icône apparaissant dans l'éditeur de fil).
  • Indiquez l'ID fileAsset pour l'icône de l'application.
  • Indiquez l'ID du composant Lightning pour le composant de rendu.
  • Pour Type, entrez Lightning. Actuellement, Lightning est le seul type disponible.
Remarque

Remarque

Vous pouvez localiser l'en-tête et le texte de survol dans le système de traduction.

Étape 4 Autorisez les applications d'éditeur enrichi dans votre communauté

Une fois que tout est prêt, l'équipe Capricorn ajoute l'application à l'éditeur de fil de sa communauté. Vous pouvez ajouter jusqu’à cinq applications d’éditeur enrichi à votre communauté via l’espace de travail d’administration dans les espaces de travail de l’expérience.

  1. Accédez aux espaces de travail de l’expérience et cliquez sur la vignette Administration.
  2. Dans la colonne de navigation, cliquez sur Applications d’éditeur enrichi.
  3. Sélectionnez jusqu'à cinq applications dans la colonne Applications disponibles et déplacez-les dans la colonne Applications sélectionnées.

    Applications d'éditeur enrichi dans l'espace de travail d'administration

  4. Pour définir l’ordre des icônes dans l’éditeur, déplacez les applications sélectionnées vers le haut ou le bas de la liste.
  5. Cliquez sur Enregistrer.