đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

Get Book Ratings

Books4Everyone loves what you’ve done so far, and they want to make their app even more robust by showing off book ratings right on the home page. In order to bring this to their advertisement team's attention, they have requested a new component for the home page. Just like before, they provided you with a SQL query that you need to turn into a SOQL query.

Write an Inner Join

Before we write our query in Apex, let’s look at the SQL query.

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

You know Book is related to Recommendation with a master-detail relationship. You write the following query.

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

Write the Apex and the New Component

First, add the new SOQL query to the Apex controller class. 

  1. In the Developer Console, open the Books4EveryoneHomeController Apex class.
  2. Add the following block of code after the first two methods:
    @AuraEnabled
    public static List<Recommendation__c> getBookRecommendations(){
      return [SELECT Name, Review__c, Rating__c, Book__r.Name
        FROM Recommendation__c
        WHERE Book__c != null];
    }
          
    Next, create a new Lightning component and JavaScript controller.
  3. Create a new component by clicking  File > New > Lightning Component.
  4. Name your new Lightning component Books4EveryoneRecommendations.
  5. In the component configuration section, select Lightning Page and click Submit.
  6. Inside the aura:component tags, add the following code.
    <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">Raiting</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>
    
  7. Click Controller on the right side of the page to create a controller for your component.
  8. Update the controller’s JavaScript with the following code.
    ({
      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);
      }
    })
          
  9. 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 the homepage.

  1. In your org, navigate to the Books4Everyone app.
  2. Click Home.
  3. In the upper right hand corner, click the gear icon and select Edit Page.
  4. On the left side of the Lightning app builder, find Books4EveryoneRecommendations in the list of custom components.
  5. Drag the component on to the page.
  6. Click Save and then Back 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.

This is an image showing the home tab and the two lightning components with SOQL-queried data

retargeting