Création d’un composant Aura

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Vidéo de démonstration Trail Together

Vous souhaitez être guidé pas à pas par un expert pendant que vous travaillez sur cette étape ? Regardez cette vidéo qui fait partie de la série Trail Together.

(Ce clip commence à 2 min 19 s, au cas où vous voudriez revenir en arrière et regarder à nouveau le début de l’étape.)

Création et ajout d’un composant Aura à la page d’enregistrement

Un composant Aura est une combinaison de balisage, de JavaScript et de CSS. Vous commencez par créer un paquet de composants.

1. Dans la Developer Console, sélectionnez File | New | Lightning Component (Fichier | Nouveau | Composant Lightning).
   
2. Dans le nom du composant, saisissez MyContactList.
   
3. Cochez Lightning Record Page, puis cliquez sur Submit (Soumettre).
   
4. Ajoutez une référence au contrôleur Apex, controller="MyContactListController", sur la balise aura:component. La balise aura:component devrait maintenant ressembler à ceci :
   <aura:component controller="MyContactListController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
5. Ajoutez le code suivant au composant à la ligne 2 :
   

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="Account" type="Account" />
   <aura:attribute name="Contacts" type="Contact" />
   <aura:attribute name="Columns" type="List" />
   <force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.Account}"
                     layoutType="FULL"
                     />
   <lightning:card iconName="standard:contact" title="{! 'Contact List for ' + v.Account.Name}">
       <!-- Contact list goes here -->
   </lightning:card>

   Nous utilisons un attribut aura:attribute pour stocker les données dans un composant Aura, dans le cas présent l’ID de la page d’enregistrement Account (Compte) actuel.
   
   Vous pouvez accéder à l’attribut dans le code en utilisant le fournisseur de valeur v. comme v. recordId ou v.Account. Les fournisseurs de valeur sont un moyen d’accéder aux données en encapsulant ensemble des valeurs associées, de la même manière qu’un objet encapsule des propriétés et des méthodes.
   
   Le composant utilise également Lightning Data Service, force:recordData, pour récupérer et stocker les champs de l’enregistrement actuel dans l’attribut nommé Account (Compte). Nous pouvons ainsi afficher le nom du compte en tant que titre du composant.
   
   Lightning Framework contient des blocs de construction d’interface utilisateur appelés « composants Lightning de base ». Parmi eux, lightning:card est relatif à l’affichage des données. Le titre de la carte est extrait du nom du compte dans l’attribut aura Account (Compte), en tant que v.Account.Name.
   
6. Sélectionnez File | Save (Fichier | Enregistrer).
   
7. Depuis App Launcher (Lanceur d’application) , cherchez et ouvrez Accounts (Comptes).
   
8. Basculez depuis la liste Recently Viewed (Récemment visualisé) vers All Accounts (Tous les comptes), puis cliquez pour ouvrir le compte United Oil & Gas Corp.
   
9. Cliquez sur l’icône de configuration et choisissez Edit Page (Modifier la page) pour lancer l’outil App Builder (Générateur d’applications).
   
10. Faites glisser votre composant depuis la liste Composants personnalisés et déposez-le en haut de la colonne droite, au-dessus du composant Activité.
    
11. Cliquez sur le bouton Save (Enregistrer).
    
12. Cliquez sur Activate (Activer) puis sur Assign as Org Default (Attribuer par défaut pour l’organisation).
    
13. Cliquez sur Desktop (Bureau), puis sur Next (Suivant).
    
14. Cliquez sur Save (Enregistrer), puis sur Back (Retour) en haut à gauche pour revenir à la page de l’enregistrement.