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.

1public with sharing class ContactController {
2@AuraEnabled
3    public static List<Contact> getContacts() {
4        List<Contact> contacts = 
5                [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact];
6
7        //Add isAccessible() check
8        return contacts;
9    }
10    
11    @AuraEnabled
12    // Retrieve all primary contacts
13    public static List<Contact> getPrimary() {
14        List<Contact> primaryContacts = 
15             [SELECT Id, Name, MailingStreet, Phone, Email, Level__c FROM Contact WHERE Level__c = 'Primary'];
16
17        //Add isAccessible() check
18        return primaryContacts;
19    }
20}

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.

1<aura:component>
2    <aura:attribute name="contact" type="Contact"/>
3    <!-- If you’re using a namespace, 
4         use {!v.contact.myNamespace__Level__c} instead -->
5    <div class="{!v.contact.Level__c == 'Primary' 
6                 ? 'row primary' : 'row '}" >
7        
8        <div onclick="{!c.gotoRecord}">
9            <force:recordView recordId="{!v.contact.Id}" type="MINI"/>
10        </div>
11
12        <!-- Open the record edit page when the button is clicked -->
13        <ui:button label="Edit" press="{!c.editRecord}"/> 
14        <!-- Navigate to the related list when the button is clicked -->
15        <ui:button label="View Cases" press="{!c.relatedList}"/>  
16    </div>
17</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.

1.THIS.primary{
2    background: #4ECDC4  !important;
3}
4
5.THIS.row { 
6    background: #fff;
7    max-width:90%;
8    border-bottom: 2px solid #f0f1f2;
9    padding: 10px;
10    margin-left: 2%;
11    margin-bottom: 10px;
12    min-height: 70px;
13    border-radius: 4px;
14}

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.

1<aura:component controller="ContactController" implements="force:appHostable">
2    <!-- Handle component initialization in a client-side controller -->
3    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
4
5    <!-- Dynamically load the list of contacts -->
6    <aura:attribute name="contacts" type="Contact[]"/>
7
8    <!-- Create a drop-down list with two options -->
9    <ui:inputSelect aura:id="selection" change="{!c.select}">
10        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
11        <ui:inputSelectOption text="All Primary" label="All Primary"/>
12    </ui:inputSelect>
13
14    <!-- Display record create page when button is clicked -->
15    <ui:button label="New Contact" press="{!c.createRecord}"/>
16
17    <!-- Iterate over the list of contacts and display them -->
18    <aura:iteration var="contact" items="{!v.contacts}">
19        <!-- If you’re using a namespace, replace with myNamespace:contactList -->
20        <c:contactList contact="{!contact}"/>
21    </aura:iteration>
22</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.

1({
2    doInit : function(component, event, helper) {
3        // Retrieve contacts during component initialization
4        helper.getContacts(component);
5    },//Delimiter for future code
6})

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.

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

Create a new Lightning Component tab by following the steps on Add Lightning Components as Custom Tabs in 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 Guide

Load the Contacts