Restitution et prévisualisation de la liste de contacts

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 à 10 min 45 s, au cas où vous voudriez revenir en arrière et regarder à nouveau le début de l’étape.)

Restitution de la liste des contacts

1. Ajoutez le code suivant sur une nouvelle ligne après le commentaire <!-- Contact list goes here -->(La liste de contacts va ici) :
   <lightning:datatable data="{!v.Contacts }" columns="{!v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
   L’élément lightning:datatable est un autre composant Lightning de base qui affichera la liste des contacts.
   
2. Sélectionnez File | Save (Fichier | Enregistrer).
   
3. Cliquez sur l’onglet MyContactListController.js.
   
4. Mettez à jour la fonction myAction avec le code suivant sur une nouvelle ligne, au-dessus de la ligne var action :
   

   component.set("v.Columns", [
       {label:"First Name", fieldName:"FirstName", type:"text"},
       {label:"Last Name", fieldName:"LastName", type:"text"},
       {label:"Phone", fieldName:"Phone", type:"phone"}
   ]);

   Le composant datatable utilise les valeurs stockées dans l’attribut Columns (Colonnes) afin de déterminer le nombre de colonnes à afficher.
   
5. Sélectionnez File | Save (Fichier | Enregistrer).
   
6. Actualisez la page Compte dans votre organisation.
   

Résumé

Félicitations ! Vous avez créé votre premier composant Lightning. Désormais, un administrateur peut ajouter votre composant à son organisation pour afficher les contacts d’un compte. Les autres développeurs peuvent également utiliser votre composant au lieu d’écrire leur propre code.