Get Books with Missing Author Data

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 10:53 minute mark, in case you want to rewind and watch the beginning of the step again.)

Introduction

Books4Everyone has recently discovered they have many books without an author listed. They want a component on the lower right corner of the home page to make sure these books can be updated quickly. Just like before, they provide you with the SQL.

Write a Right Anti Join

Here's the SQL query they gave you.

SELECT Name, Description
  FROM Book
  WHERE Author IS NULL

You know that in SOQL we will write it like this.

SELECT Name, Description__c
  FROM Book__c
  WHERE Author__c = null

Write the Apex and the New Component

Now, add the SOQL query to the Apex controller. 

1. In the Developer console, open the Books4EveryoneHomeController Apex class.
2. Add the following block of code after the first method.

     @AuraEnabled
     public static List<Book__c> getBooksWithoutAuthors(){
       return [SELECT Name
         FROM Book__c
         WHERE Author__c = null];
     }

Once again, create a new Lightning component for the Home page. 

1. Close any open tabs in the Developer Console and then choose File > New > Lightning Component.
2. Name your new Lightning component Books4EveryoneMissingAuthors.
3. In the component configuration section, select Lightning Page and click Submit.
4. Replace the code in the .cmp file with the following code.

   <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 Missing Author List">
       <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>
             </tr>
           </thead>
           <tbody>
             <aura:iteration items="{!v.Books}" var="books">
               <tr scope="row">
                 <td> {!books.Name}</td>
               </tr>
             </aura:iteration>
           </tbody>
         </table>
       </aura:set>
     </lightning:card>
   </aura:component>

5. Click Controller on the right side of the page to create a controller for your component.
6. Replace the controller’s JavaScript with the following code.

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

7. Save all your open tabs.

Let’s See This Component in Action!

Our final step is to ensure our query worked as expected by adding our component to our homepage.

1. In your org, navigate to the Books4Everyone app.
2. Click Home.
3. In the upper right hand corner, click and select Edit Page.
4. On the left side of the Lightning app builder, find Books4EveryoneMissingAuthors in the list of custom components.
5. Drag the component to the top right panel on the page.
6. Click Save and then  to return to the Home page.
7. The final step is to check out the data on your Home page. It should look something like this.