Module 5: Creating the ContactList Component

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

What you will learn

  • Create a Lightning Component in the Developer Console
  • Use component attributes
  • Use event handlers
  • Use Lightning Components in a Lightning Application

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="yournamespace.ContactController">
    
        <aura:attribute name="contacts" type="Contact[]"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
        <ul class="list-group">
            <aura:iteration items="{!v.contacts}" var="contact">
                <li class="list-group-item">
                    <a href="{! '#contact/' + contact.Id }">
                        <p>{!contact.Name}</p>
                        <p>{!contact.Phone}</p>
                    </a>
                </li>
            </aura:iteration>
        </ul>
    
    </aura:component>
    

    Make sure you prefix the controller name with your own namespace you created in module 2.

    Code Highlights:

    • The controller assigned to the component (first line of code) refers to the server-side controller (ContactController) you created in module 3.
    • 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
    • The <a href="{! '#contact/' + contact.Id }"> anchor tag around the contact data is defined to set the page hashtag to #contact/ followed by the contact id. In module 7, the ContactDetails component will use that hashtag to display details information every time the user clicks a new contact.
  3. Click File > Save to save the file.

Step 2: Implement the Controller

  1. Click 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());
            });
            $A.enqueueAction(action);
        }
    })
    

    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 (ContactController), 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 Application UI

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

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

  2. Modify the container div as follows to add the ContactList component to the application layout.

    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <yournamespace:ContactList/>
            </div>
        </div>
    </div>
    

    Make sure you prefix ContactList with your own namespace you created in module 2.

  3. Click File > Save to save the file

  4. Click Preview or Update Preview

  5. Preview the application in your browser

Step 4: Style the Component

There is probably too much space above and below the phone number. In this step, you'll add a style to the component to remove the extra space.

  1. Click STYLE

  2. Implement the following style:

    .THIS p {
        margin: 0;
    }
    
  3. Click File > Save to save the file

  4. In the developer console, go back to the QuickContacts application, click Preview or Update Preview to preview the application in your browser

comments powered by Disqus