Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Before You Begin
Create a Standalone Lightning App
Create a Component for Salesforce1 and Lightning Experience
Load the Contacts
Fire the Events
Creating Components
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.
  1. 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.

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

  2. 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.
  3. 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.
  4. 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.
  5. 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.
  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.
  7. Create a new Lightning Component tab by following the steps on Add 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.