書籍を著者と共に表示する

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 06:52 分から開始されます。)

はじめに

このステップは、クライアントである Books4Everyone のホームページを完璧に仕上げる作業の続きです。クライアントは、ホームページに本のタイトルを表示できるという点が気に入り、他にも表示させたい情報を思いつきました。そして Books4Everyone の開発者から、ホームページに表示させたい情報についての新たなアイデアが提供されました。

Salesforce でのリレーションのしくみを理解する

SOQL では、SQL の結合で取得するのと同じデータを得るためにリレーションクエリを使用します。これは、照会する 2 つのオブジェクトが関連している場合にのみ行えます。Books4Everyone パッケージでは、すでに必要なリレーションがすべて定義されています。 

Books4Everyone に対する要求が完全に定義されるまで、このようなリレーションクエリをいくつか作成します。各クエリをテストするには、Apex クラスと Lightning コンポーネントを更新する必要があります。

right outer 結合を記述する

1. 開発者コンソールを開いて、Books4EveryoneHomeController Apex クラスを開きます。
2. 最初のメソッドの後に次のコードブロックを追加します。

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

   Books4Everyone が提案する最初のクエリは次のとおりです。

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

   SOQL では、次のように記述します。

   SELECT Name, Description__c, Author__r.Name
     FROM Book__c

3. この新しい SOQL クエリをメソッドに追加します。この時点でメソッドの関数は次のようになっています。

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

   では、ホームページの Lightning コンポーネントを更新しましょう。
4. 開発者コンソールで、Books4EveryoneHome Lightning コンポーネントを開きます。
5. テーブルを次のように更新します。

         <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. Books4EveryoneHomeControllerJavaScript ファイルを開いて、新しい関数を呼び出すようにアクションを更新します。

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

   この時点でコントローラーのコードは次のようになります。

   ({
     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. すべてのファイルを保存してページを更新します。