Load the Contacts

Create an Apex controller and load your contacts.

Your organization must have existing contact records for this tutorial. This tutorial uses a custom picklist field, Level, which is represented by the API name Level__c. This field contains three picklist values: Primary, Secondary, and Tertiary.

Click File | New | Apex Class, and then enter ContactController in the New Class window. This creates a new Apex class, ContactController.apxc. Enter this code and then save.

If you’re using a namespace in your organization, replace Level__c with myNamespace__Level__c.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public with sharing class ContactController {
18@AuraEnabled
19    public static List<Contact> getContacts() {
20        List<Contact> contacts = 
21                [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact];
22
23        //Add isAccessible() check
24        return contacts;
25    }
26    
27    @AuraEnabled
28    // Retrieve all primary contacts
29    public static List<Contact> getPrimary() {
30        List<Contact> primaryContacts = 
31             [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact WHERE Level__c = 'Primary'];
32
33        //Add isAccessible() check
34        return primaryContacts;
35    }
36}

getPrimary() returns all contacts whose Level__c field is set to Primary.

Click File | New | Lightning Component, and then enter contactList for the Name field in the New Lightning Bundle popup window. This creates a new component, contactList.cmp. Enter this code and then save.

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18    <aura:attribute name="contact" type="Contact"/>
19    <!-- If you’re using a namespace, use {!v.contact.myNamespace__Level__c} instead -->
20    <div class="{!v.contact.Level__c == 'Primary' 
21                 ? 'row primary' : 'row '}" >
22
23        <!-- Display a contact name 
24             and navigate to record when the name is clicked -->
25        <div class="col-sm-4">
26            <ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
27        </div>
28        <div class="col-sm-4">
29            <ui:outputEmail value="{!v.contact.Email}"/>
30            <ui:outputPhone value="{!v.contact.Phone}"/>
31
32            <!-- Display the edit record page when the icon is clicked -->
33            <div onclick="{!c.editRecord}">
34                <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" />	
35            </div> 
36        </div>
37        <div class="col-sm-4">
38            <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/>              
39        </div>
40
41         <!-- Navigate to the related list when the button is clicked -->
42         <ui:button label="View Cases" press="{!c.relatedList}"/>  
43    </div>
44</aura:component>

In the contactList sidebar, click STYLE to create a new resource named contactList.css. Replace the placeholder code with the following code and then save.

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.primary{
18    background: #4ECDC4  !important;
19}
20
21.THIS .uiOutputText {
22   width: 25%;
23   float: left;
24   font-weight: bold;
25}
26
27.THIS .uiOutputPhone {
28    color: #2574A9;
29}
30
31.THIS .uiOutputTextArea {
32    float:clear;
33}
34
35.THIS .uiOutputEmail {
36    float: right;
37}
38
39.THIS .uiButton {
40    margin-top: 20px !important;
41}

Click File | New | Lightning Component, and then enter contacts for the Name field in the New Lightning Bundle popup window. This creates a new component, contacts.cmp. Enter this code and then save. If you’re using a namespace in your organization, replace ContactController with myNamespace.ContactController.

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component controller="ContactController" implements="force:appHostable">
18    <!-- Handle component initialization in a client-side controller -->
19    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
20
21    <!-- Handle loading events by displaying a spinner -->
22    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
23    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
24
25    <!-- Dynamically load the list of contacts -->
26    <aura:attribute name="contacts" type="Contact[]"/>
27
28    <!-- Create a drop-down list with two options -->
29    <ui:inputSelect aura:id="selection" change="{!c.select}">
30        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
31        <ui:inputSelectOption text="All Primary" label="All Primary"/>
32    </ui:inputSelect>
33    
34    <div class="icons">
35        <img src="/img/icon/custom51_100/chalkboard16.png" alt="Create New" title="Create New" onclick="{!c.createRecord}"/>
36    </div>
37    <div><center><ui:spinner aura:id="spinner"/></center></div>
38  
39    <!-- Iterate over the list of contacts and display them -->
40    <aura:iteration var="contact" items="{!v.contacts}">
41        <!-- If you’re using a namespace, replace with myNamespace:contactList -->
42        <c:contactList contact="{!contact}"/>
43    </aura:iteration>
44</aura:component>

In the contacts sidebar, click CONTROLLER to create a new resource named contactsController.js. Replace the placeholder code with the following code and then save.

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    doInit : function(component, event, helper) {
19        // Retrieve contacts during component initialization
20        helper.getContacts(component);
21    },
22
23    showSpinner : function (component, event, helper) {
24        var spinner = component.find('spinner');
25        var evt = spinner.get("e.toggle");
26        evt.setParams({ isVisible : true });
27        evt.fire();
28    },
29    
30    hideSpinner : function (component, event, helper) {
31        var spinner = component.find('spinner');
32        var evt = spinner.get("e.toggle");
33        evt.setParams({ isVisible : false });
34        evt.fire();
35    },//Delimiter for future code
36})

In the contacts sidebar, click HELPER to create a new resource named contactsHelper.js. Replace the placeholder code with the following code and then save.

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    getContacts : function(cmp) {
19        // Load all contact data
20        var action = cmp.get("c.getContacts");
21        var self = this;
22        action.setCallback(this, function(response) {
23            var state = response.getState();
24            if (cmp.isValid() && state === "SUCCESS") {
25                cmp.set("v.contacts", response.getReturnValue());
26            }
27
28            // Display toast message to indicate load status
29            var toastEvent = $A.get("e.force:showToast");
30            if (state === 'SUCCESS'){
31                toastEvent.setParams({
32                    "title": "Success!",
33                    "message": " Your contacts have been loaded successfully."
34                });
35            }
36            else {
37                toastEvent.setParams({
38                        "title": "Error!",
39                        "message": " Something has gone wrong."
40                });
41            }
42            toastEvent.fire();
43        });
44         $A.enqueueAction(action);
45    }
46})

In the contacts sidebar, click STYLE to create a new resource named contacts.css. Replace the placeholder code with the following code and then save.

1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.row {
18    background: #fff;
19    max-width:90%;
20    border-bottom: 2px solid #f0f1f2;
21    padding: 10px;
22    margin-left: 2%;
23    margin-bottom: 10px;
24    min-height: 70px;
25    border-radius: 4px;
26}
27
28.THIS.uiInputSelect {
29    width: 80%;
30    padding-left: 10px;
31    min-height: 28px;
32    margin-bottom: 20px;
33    margin-left: 20px;
34    margin-top: 40px;
35}
36
37.THIS img {
38    float: right;
39    padding-right:5%;
40    padding-top: 20px;
41}
42
43.THIS.icons {
44    height:60px;
45}

Create a new Lightning Component tab by following the steps on Adding Lightning Components to Salesforce1. Make sure you include the component in the Salesforce1 navigation menu.

Finally, you can go to the Salesforce1 mobile browser app to check your output. When your component is loaded, you should see a toast message that indicates your contacts are loaded successfully.

Next, we’ll wire up the other events so that your input select displays either all contacts or only primary contacts that are colored green. We’ll also wire up events for opening the create record and edit record pages, and events for navigating to a record and a URL.

Lightning Components Developer’s Guide

Load the Contacts