Load the Contacts

Create an Apex controller and load your contacts.

Your organization must have existing contact records for this demo.

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. Replace namespace with the name of your registered namespace.

1swfobject.registerObject("clippy.codeblock-0", "9");public class ContactController {
2@AuraEnabled
3    public static List<Contact> getContacts() {
4        List<Contact> contacts = 
5                [SELECT Id, Name, MailingStreet, Phone, Email, namespace__Level__c FROM Contact];
6        return contacts;
7    }
8    
9    @AuraEnabled
10    // Retrieve all primary contacts
11    public static List<Contact> getPrimary() {
12        List<Contact> primaryContacts = 
13             [SELECT Id, Name, MailingStreet, Phone, Email, namespace__Level__c FROM Contact WHERE namespace__Level__c = 'Primary'];
14        return primaryContacts;
15    }
16}

getPrimary() returns all contacts whose namespace__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");<aura:component>
2    <aura:attribute name="contact" type="Contact"/>
3    <div class="{!v.contact.tutorial__Level__c == 'Primary' 
4                 ? 'row primary' : 'row '}" >
5
6        <!-- Display a contact name 
7             and navigate to record when the name is clicked -->
8        <div class="col-sm-4">
9            <ui:outputText value="{!v.contact.Name}" click="{!c.gotoRecord}"/>
10        </div>
11        <div class="col-sm-4">
12            <ui:outputEmail value="{!v.contact.Email}"/>
13            <ui:outputPhone value="{!v.contact.Phone}"/>
14
15            <!-- Display the edit record page when the icon is clicked -->
16            <div onclick="{!c.editRecord}">
17                <img src="/img/icon/custom51_100/pencil16.png" alt="Edit Contact" title="Edit Contact" />	
18            </div> 
19        </div>
20        <div class="col-sm-4">
21            <ui:outputTextArea aura:id="address" value="{!v.contact.MailingStreet}" click="{!c.navigate}"/>              
22        </div>
23
24         <!-- Navigate to the related list when the button is clicked -->
25         <ui:button label="View Cases" press="{!c.relatedList}"/>  
26    </div>
27</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");.THIS.primary{
2    background: #4ECDC4  !important;
3}
4
5.THIS .uiOutputText {
6   width: 25%;
7   float: left;
8   font-weight: bold;
9}
10
11.THIS .uiOutputPhone {
12    color: #2574A9;
13}
14
15.THIS .uiOutputTextArea {
16    float:clear;
17}
18
19.THIS .uiOutputEmail {
20    float: right;
21}
22
23.THIS .uiButton {
24    margin-top: 20px !important;
25}

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. Replace namespace with the name of your registered namespace.

1swfobject.registerObject("clippy.codeblock-3", "9");<aura:component controller="namespace.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    <!-- Handle loading events by displaying a spinner -->
6    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
7    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
8
9    <!-- Dynamically load the list of contacts -->
10    <aura:attribute name="contacts" type="Contact[]"/>
11
12    <!-- Create a drop-down list with two options -->
13    <ui:inputSelect aura:id="selection" change="{!c.select}">
14        <ui:inputSelectOption text="All Contacts" label="All Contacts"/> 
15        <ui:inputSelectOption text="All Primary" label="All Primary"/>
16    </ui:inputSelect>
17    
18    <div class="icons">
19        <img src="/img/icon/custom51_100/chalkboard16.png" alt="Create New" title="Create New" onclick="{!c.createRecord}"/>
20    </div>
21    <div><center><ui:spinner aura:id="spinner"/></center></div>
22  
23    <!-- Iterate over the list of contacts and display them -->
24    <aura:iteration var="contact" items="{!v.contacts}">
25        <namespace:contactList contact="{!contact}"/>
26    </aura:iteration>
27</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    doInit : function(component, event, helper) {
3        // Retrieve contacts during component initialization
4        helper.getContacts(component);
5    },
6
7    showSpinner : function (component, event, helper) {
8        var spinner = component.find('spinner');
9        var evt = spinner.get("e.toggle");
10        evt.setParams({ isVisible : true });
11        evt.fire();
12    },
13    
14    hideSpinner : function (component, event, helper) {
15        var spinner = component.find('spinner');
16        var evt = spinner.get("e.toggle");
17        evt.setParams({ isVisible : false });
18        evt.fire();
19    },//Delimiter for future code
20})

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

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");.THIS.row {
2    background: #fff;
3    max-width:90%;
4    border-bottom: 2px solid #f0f1f2;
5    padding: 10px;
6    margin-left: 2%;
7    margin-bottom: 10px;
8    min-height: 70px;
9    border-radius: 4px;
10}
11
12.THIS.uiInputSelect {
13    width: 80%;
14    padding-left: 10px;
15    min-height: 28px;
16    margin-bottom: 20px;
17    margin-left: 20px;
18    margin-top: 40px;
19}
20
21.THIS img {
22    float: right;
23    padding-right:5%;
24    padding-top: 20px;
25}
26
27.THIS.icons {
28    height:60px;
29}

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

No Results

Load the Contacts