Affichage des livres et des auteurs

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

Introduction

Lors de cette étape, vous allez continuer à concevoir une page d’accueil parfaite pour Books4Everyone. Les membres de l’entreprise apprécient que les titres de livres puissent figurer sur la page d’accueil. Cela leur a donné des idées pour les autres informations à afficher. Le développeur de Books4Everyone vous a donné quelques nouvelles idées concernant les éléments à afficher sur la page d’accueil.

Fonctionnement des relations dans Salesforce

Avec SOQL, les requêtes de relation obtiennent des données identiques à celles générées par une jointure dans SQL. Cela n’est possible que si les deux objets que nous interrogeons sont liés. Heureusement, le package Books4Everyone a déjà mis en place toutes les relations dont nous avons besoin. 

Nous allons écrire quelques-unes de ces requêtes de relation afin de répondre à la dernière demande de Books4Everyone. Pour tester chaque requête, nous allons devoir mettre à jour notre classe Apex et notre composant Lightning.

Écriture d’une jointure externe droite

1. Ouvrez la Developer Console et la classe Apex Books4EveryoneHomeController.
2. Ajoutez le bloc de code suivant après la première méthode.

     @AuraEnabled
     public static List<Book__c> getBooksAndAuthor() {
       return; //Your Query here!
     }

   Voici la première requête suggérée par Books4Everyone.

   SELECT a.Name, b.Name, b.Description
     FROM Author a
     RIGHT JOIN Book b ON (b.Author=a.Name)

   Avec SOQL, nous l’écrivons comme suit :

   SELECT Name, Description__c, Author__r.Name
     FROM Book__c

3. Ajoutez la nouvelle requête SOQL à votre méthode. Votre code doit désormais se présenter comme suit.

     @AuraEnabled
     public static List<Book__c> getBooksAndAuthor() {
       return [SELECT Name, Description__c, Author__r.Name
         FROM Book__c];
     }

   À présent, nous allons mettre à jour le composant Lightning de la page d’accueil.
4. Dans la Developer Console, ouvrez le composant Lightning Books4EveryoneHome.
5. Mettez à jour le tableau pour qu’il ressemble à ceci :

         <table class="slds-table slds-table_bordered slds-table_cell-buffer">
           <thead>
             <tr class="slds-text-title_caps">
               <th scope="col">Book Titles</th>
               <th scope="col">Book Descriptions</th>
               <th scope="col">Author</th>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Books}" var="books">
               <tr scope="row">
                 <td> {!books.Name}</td>
                 <td> {!books.Description__c}</td>
                 <td> {!books.Author__r.Name}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>

6. Ouvrez le fichier JavaScript Books4EveryoneHomeController et mettez à jour l’action afin qu’elle appelle notre nouvelle fonction.

       var action = component.get("c.getBooksAndAuthor");

   Votre code de contrôleur doit désormais se présenter comme suit.

   ({
     doInit: function(component, event, helper) {
       var action = component.get("c.getBooksAndAuthor");
       action.setCallback(this, function(data) {
         component.set("v.Books", data.getReturnValue());
         console.log(data.getReturnValue());
       });
       $A.enqueueAction(action);
     }
   })

7. Enregistrez tous les fichiers et actualisez la page.