Module 4: Creating the ContactList Component

In this module, you create a Lightning Component responsible for displaying the list of contacts and you add the ContactList component to the QuickContacts component.

What you will learn

  • Use component attributes
  • Use event handlers
  • Use a Lightning Component in another Lightning Component

Step 1: Create the Component

  1. In the Developer Console, click File > New > Lightning Component. Specify ContactList as the bundle name and click Submit

  2. Implement the component as follows:

     <aura:component controller="ContactListController">
         <aura:attribute name="contacts" type="Contact[]"/>
         <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
             <aura:iteration items="{!v.contacts}" var="contact">
                     <a href="{! '#/sObject/' + contact.Id + '/view'}">

    ### Code Highlights:

    • The controller assigned to the component (first line of code) refers to the server-side controller (ContactListController) you created in module 2.
    • The contacts attribute is defined to hold the list of Contact objects returned from the server.
    • The init handler is defined to execute some code when the component is initialized. That code (doInit) is defined in the component’s client-side controller (you’ll implement the controller in the next step).
    • <aura:iteration> is used to iterate through the list of contacts and create an <li> for each contact
  3. Click File > Save to save the file.

Step 2: Implement the Controller


  2. Implement the Controller as follows:

         doInit : function(component, event) {
             var action = component.get("c.findAll");
             action.setCallback(this, function(a) {
                 component.set("v.contacts", a.getReturnValue());

    ### Code Highlights:

    • The controller has a single function called doInit. This is the function the component calls when it is initialized.
    • You first get a reference to the findAll() method in the component’s server-side controller (ContactListController), and store it in the action variable.
    • Since the call to the server’s findAll() method is asynchronous, you then register a callback function that is executed when the call returns. In the callback function, you simply assign the list of contacts to the component’s contacts attribute.
    • $A.enqueueAction(action) sends the request the server. More precisely, it adds the call to the queue of asynchronous server calls. That queue is an optimization feature of Lightning.
  3. Click File > Save to save the file

Step 3: Add ContactList to the QuickContacts Component

  1. In the developer console, go back to the QuickContacts component.

    If you don’t see the tab in the developer console, click File > Open Lightning Resources in the Developer Console menu, select QuickContacts > COMPONENT in the dialog, and click the Open Selected button.

  2. Replace the ContactList placeholder with the actual component:

     <aura:component implements="force:appHostable">

    c: is the default namespace for Lightning components

  3. Click File > Save to save the file

  4. Go back to the Salesforce1 app and reload Quick Contacts from the menu to see the changes:

Step 4: Style the ContactList Component

In this step, you’ll add some CSS styles to the component to make it look like a standard mobile list. You’ll remove the item bullets, add a horizontal line between items, and fine tune margins.

  1. Click STYLE

  2. Implement the following styles:

     .THIS {
         list-style-type: none;
         padding: 0;
         margin: 0;
     .THIS li {
         border-bottom: solid 1px #DDDDDD;
         padding: 8px;
     .THIS p {
         margin: 4px;
  3. Click File > Save to save the file

  4. Go back to the Salesforce1 app and reload Quick Contacts from the menu to see the changes:

comments powered by Disqus