Retrieve a Contact List

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 8:00 minute mark, in case you want to rewind and watch the beginning of the step again.)

Retrieve the Contacts

Now add an event handler that calls a JavaScript function to retrieve data from Salesforce.

1. In the Developer Console, click the MyContactList.cmp tab.
   
2. In the button panel on the right, click Controller.
   
3. In the body of the myAction JavaScript function, add the following code, beginning on a new line:
   

   var action = component.get("c.getContacts");
   action.setParams({
       recordId: component.get("v.recordId")
   });
   action.setCallback(this, function(data) {
       component.set("v.Contacts", data.getReturnValue());
   });
   $A.enqueueAction(action);

   This Value Provider can return a reference to a client- or server-side method. You use it to call methods from the server, as well as to call methods in the myComponentController.js file. There are other Value Providers as well; please check the documentation above to learn more about those.
   
   The JavaScript function calls the getContacts method using the value provider c. as c.getContacts to access the Apex controller that you created earlier, passing the recordId of the current Account. It then populates the attribute named Contacts with the results.
   
4. Select File | Save.
   
5. Click the MyContactList.cmp tab and add the following markup below the last aura:attribute tag:
   <aura:handler name="init" value="{!this}" action="{!c.myAction}" /> An aura:handler listens for a specific event and then executes the function identified by the action attribute in the component's controller file. The name attribute identifies the event, in this case init which is the event that fires as the component is loaded onto the page.
   
6. Select File | Save.