Obtention des évaluations des livres

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

Introduction

L’équipe de Books4Everyone aime ce que vous avez fait jusqu’à présent. Elle souhaite renforcer encore plus la fiabilité de son application en affichant les évaluations des livres directement sur la page d’accueil. Afin de transmettre cette idée à l’équipe publicitaire, elle a demandé un nouveau composant pour la page d’accueil. Comme précédemment, elle vous a fourni une requête SQL que vous devez transformer en requête SOQL.

Écriture d’une jointure interne

Avant d’écrire notre requête dans Apex, examinons la requête SQL.

SELECT r.Name, r.Review, r.Grade, b.Name
  FROM recommendation r, book b
  WHERE b.Id != null

Vous savez que l’élément Book (Livre) est lié à l’élément Recommendation (Recommandation) via une relation principal-détail. Vous écrivez la requête suivante.

SELECT Name, Review__c, Rating__c, Book__r.Name
  FROM Recommendation__c
  WHERE Book__c != null

Écriture du code Apex et du nouveau composant

Tout d’abord, ajoutez la nouvelle requête SOQL à la classe du contrôleur Apex.

1. Dans la Developer Console, ouvrez la classe Apex Books4EveryoneHomeController.
2. Ajoutez le bloc de code suivant après les deux premières méthodes :

     @AuraEnabled
     public static List<Recommendation__c> getBookRecommendations() {
       return [SELECT Name, Review__c, Rating__c, Book__r.Name
         FROM Recommendation__c
         WHERE Book__c != null];
     }

Créez ensuite un composant Lightning et un contrôleur JavaScript.

1. Créez un composant en cliquant sur File (Fichier) > New (Nouveau) > Lightning Component (Composant Lightning).
2. Nommez votre nouveau composant Lightning Books4EveryoneRecommendations (RecommandationsBooks4Everyone).
3. Dans la section de configuration du composant, sélectionnez Lightning Page (Page Lightning) et cliquez sur Submit (Soumettre).
4. Remplacez le code du fichier .cmp par le code suivant :

   <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Books4EveryoneHomeController">
     <aura:attribute name="Recommendations" type="Recommendation__c" />
     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
     <lightning:card title="Books4Everyone Recommendations">
       <aura:set attribute="body">
         <table class="slds-table slds-table_bordered slds-table_cell-buffer">
           <thead>
             <tr class="slds-text-title_caps">
               <th scope="col">Book Title</th>
               <th scope="col">Rating</th>
               <th scope="col">Review</th>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Recommendations}" var="recommendations">
               <tr scope="row">
                 <td> {!recommendations.Book__r.Name}</td>
                 <td> {!recommendations.Rating__c}</td>
                 <td> {!recommendations.Review__c}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>
       </aura:set>
     </lightning:card>
   </aura:component>

5. Cliquez sur Controller (Contrôleur) sur le côté droit de la page afin de créer un contrôleur pour votre composant.
6. Remplacez le code JavaScript du contrôleur par le code suivant.

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

7. Enregistrez tous les onglets ouverts.

Résultat généré par le composant

La dernière étape consiste à s’assurer que la requête a fonctionné comme prévu en ajoutant le composant à la page d’accueil.

1. Dans votre organisation, accédez à l’application Books4Everyone.
2. Cliquez sur Home (Accueil).
3. Dans le coin supérieur droit, cliquez sur et sélectionnez Edit Page (Modifier la page).
4. Sur le côté gauche du générateur d’application Lightning, recherchez Books4EveryoneRecommendations (RecommandationBooks4Everyone) dans la liste des composants personnalisés.
5. Faites glisser le composant sur la page.
6. Cliquez sur Save (Enregistrer), puis sur  pour revenir à la page d’accueil.
7. La dernière étape consiste à vérifier les données sur la page d’accueil. La page doit se présenter comme suit :