Add a Tile for Each Contact
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. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.
Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.
Ce que vous allez faire
- Extraire une liste de contacts de votre organisation
- Afficher chaque contact dans un composant vignette
Étape 1 : Ajouter les vignettes de contact
La page de base est maintenant configurée. Nous pouvons extraire une liste de contacts et ajouter chaque contact sous la forme d’une vignette à la balise div « contact-list ».
Nous nous allons utiliser des objets distants d'accès aux données Visualforce, accédés via JavaScript.
Modifiez le code de base en ajoutant le code suivant entre les commentaires <!-- JAVASCRIPT --> :
<!-- JAVASCRIPT --> <script> (function () { var contact = new SObjectModel.Contact(); var contactList = document.getElementById('contact-list'); /* FUNCTION createTile */ function createTile(record) { return ['<li class="slds-item">', '<div class="slds-tile slds-media">', '<div class="slds-media__body">', '<h3 class="slds-truncate" title="', record.get('Name'), '"><a href="javascript:void(0);">', record.get('Name'), '</a></h3>', '<div class="slds-tile__detail slds-text-body_small">', '<p class="slds-truncate">', record.get( 'Title'), '</p>', '</div>', '</div>', '</div>', '</li>' ].join(''); } /* FUNCTION createTile */ contact.retrieve({ orderby:[{ LastModifiedDate:'DESC' }], limit:810 }, function (error, records) { if (error) { alert(error.message); } else { contactList.innerHTML = records.map(createTile).join(''); } }); })(); </script> <!-- JAVASCRIPT --> Étape 2 : Prévisualiser
Enregistrez votre page, puis cliquez sur le bouton Preview (Aperçu).
Ressources
Le site Design System Lightning contient une documentation et des exemples supplémentaires sur les composants utilisés ci-dessus.
