Création d’un composant Aura

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Veillez à copier/coller les valeurs en anglais, puis à définir la langue de votre Trailhead Playground sur Anglais et les paramètres régionaux sur États-Unis. Suivez les instructions ici.

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 doit désormais se présenter comme suit :

    <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) en cours. 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. 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).
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.