Écriture de votre première requête SOQL

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 à 2 min 33 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 créer un composant Lightning simple et un contrôleur Apex. Ensuite, vous mettrez à jour le composant pour qu’il affiche les données et convertirez le code SQL de base en SOQL. 

Création d’un paquet de composants Lightning

Maintenant que vous avez créé votre organisation, installé le package et importé les données, il est temps de créer un composant Lightning qui affiche des données simples à partir d’une requête SQL convertie.

1. Ouvrez la Developer Console.
2. Fermez tous les onglets ouverts dans Developer Console, puis cliquez sur File (Fichier) > New (Nouveau) > Lightning Component (Composant Lightning).
3. Nommez le composant Lightning Books4EveryoneHome (AccueilBooks4Everyone).
4. Dans la section de configuration du composant, sélectionnez Lightning Page (Page Lightning) et cliquez sur Submit (Soumettre).
5. Remplacez le contenu du composant par ce code.

   <aura:component implements="flexipage:availableForAllPageTypes" access="global">
     <aura:attribute name="Books" type="Book__c" />
     <lightning:card title="Books4Everyone Books">
       <aura:set attribute="body">
         TODO: Update this to display data!
       </aura:set>
     </lightning:card>
   </aura:component>

   Le composant est assez simple jusqu’à présent. Il comporte un attribut permettant de stocker des informations sur les livres et affiche les données dans une carte Lightning. Vous reviendrez bientôt sur ce paquet, mais vous devez d’abord écrire du code Apex pour le remplir de données.

Création d’une classe Apex

La prochaine étape consiste à créer un contrôleur Apex permettant d’obtenir les données demandées par Books4Everyone.

1. Dans la Developer Console, cliquez sur File (Fichier) > New (Nouveau) > Apex Class (Classe Apex).
2. Nommez la nouvelle classe Apex Books4EveryoneHomeController (ContrôleurAccueilBooks4Everyone).
3. Remplacez le corps de la classe Apex par le code suivant :

   public with sharing class Books4EveryoneHomeController {
     @AuraEnabled
     public static List<Book__c> getBooks() {
       return; //Your query here
     }
   }

4. Analysons rapidement le code que nous venons d’écrire. La première ligne est @AuraEnabled, ce qui nous permet d’appeler cette fonction depuis le composant Lightning. Ensuite, il y a la définition de fonction. Elle précise que nous renverrons une liste d’objets Book__c. Elle est importante, car les requêtes SOQL renvoient toujours des listes sObjects. Ce code ne sera pas encore enregistré, car vous devez encore écrire la requête SOQL. Books4Everyone souhaite afficher tous les titres de livres et leur description. Voici la requête SQL permettant d’y parvenir : 

   SELECT b.ID, b.Name, b.Description
     FROM Book b

   Vous pouvez essayer de l’intégrer dans le code, mais cela ne fonctionnera pas. Passons en revue ce que nous savons actuellement : Book (Livre) est un objet personnalisé de Salesforce qui faisait partie du package non géré que nous avons installé, avec le nom d’API Book__c. Étant donné que Id (Identifiant) et Name (Nom) sont des champs standard, les noms d’API sont respectivement Id et Name. Cependant, la description est un champ personnalisé. Son nom d’API est donc Description__c.
5. Nous en savons suffisamment pour mettre à jour la classe Apex à l’aide de la nouvelle requête SOQL. Remplacez return; //Your query here (return; //Votre requête) par ce qui suit :

   return [SELECT Id,Name,Description__c
     FROM Book__c];

6. Enregistrez votre fichier. Vous avez écrit votre première requête SOQL !

Différences entre SQL et SOQL

Maintenant que nous avons converti notre première requête, voici un tableau avec quelques questions courantes concernant les différences entre SQL et SOQL.

Mise à jour de votre composant Lightning pour afficher des données

Maintenant que nous avons écrit une requête pour obtenir des données, nous devons également nous assurer que ces données s’affichent. Nous allons donc mettre à jour le composant approprié.

1. Dans la Developer Console, revenez au composant Lightning Books4EveryoneHome.
2. Mettez à jour le composant pour qu’il ressemble à ceci :

   <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="Books4EveryoneHomeController">
     <aura:attribute name="Books" type="Book__c" />
     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
     <lightning:card title="Books4Everyone Books">
       <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 Titles</th>
               <th scope="col">Book Descriptions</th>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Books}" var="books">
               <tr scope="row">
                 <td> {!books.Name}</td>
                 <td> {!books.Description__c}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>
       </aura:set>
     </lightning:card>
   </aura:component>

   C’est un peu plus complexe que la dernière fois. Le premier grand changement a été d’ajouter un contrôleur au composant avec controller=”Books4EveryoneHomeController”. Cela relie le composant à la classe Apex. Ensuite, nous avons ajouté un tableau pour afficher les données. Il a deux colonnes : Book Titles (Titres de livres) et Book Descriptions (Descriptions de livres). Nous utilisons un composant aura:iteration pour afficher les données issues de Books. Pour le moment, cet attribut est vide. Nous devons donc mettre à jour le contrôleur JavaScript pour placer les données de la classe Apex dans l’attribut « aura ».
3. Cliquez sur Controller (Contrôleur) sur le côté droit de la page afin de créer un contrôleur pour votre composant Lightning.
4. Modifiez le code JavaScript du contrôleur comme suit :

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

   Les données se trouvent désormais dans l’attribut « aura ». Cette action appelle la fonction Apex getBooks pour renseigner l’attribut Books sur le composant Books4EveryoneHome (AccueilBooks4Everyone).
5. Enregistrez tous les onglets ouverts.

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

La dernière étape pour s’assurer que la requête a fonctionné comme prévu consiste à ajouter le composant à la page d’accueil. Faisons-le maintenant.

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 Books4EveryoneHome (RecommandationBooks4Everyone) dans la liste des composants personnalisés.
5. Faites glisser le composant vers la gauche de la page.
6. Cliquez sur Save (Enregistrer), activez la page en cliquant sur Activate (Activer), sélectionnez Assign as Org Default (Attribuer par défaut pour l’organisation), puis cliquez sur Save (Enregistrer).
7. Cliquez sur  pour revenir à la page d’accueil.
8. La dernière étape consiste à vérifier les données sur la page d’accueil. La page doit se présenter comme suit :