Restitution et prévisualisation de la liste de contacts

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 à 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

Ajoutez le code suivant sur une nouvelle ligne, après le commentaire  :
```
<lightning:datatable data="{!v.Contacts }" columns="{!v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
```
lightning:datatable est un autre composant Lightning de base qui affiche la liste des contacts.
Sélectionnez File | Save (Fichier | Enregistrer).
Cliquez sur l’onglet MyContactListController.js.
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 afin de déterminer le nombre de colonnes à afficher.
Sélectionnez File | Save (Fichier | Enregistrer).
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.