Lightning component framework is a UI framework to develop dynamic mobile and desktop app. This is the framework for building single page application. In this framework we use multiple components for building single page application and code reusability. We use javascript for client side and apex for server side. We use aura framework for creating lightning component.

Lightning component framework is used to deploy easily new apps to mobile devices running salesforce1. Some of the exceptional examples are the salesforce1 mobile app and the salesforce lightning experience which are built with lightning components.

Enable Lightning experience

To use lightning experience, you have enable lightning experience first. To enable lightning experience, you have to follow below steps :-

Click setup -> Go to Lightning Experience link -> Enable Lightning experience

After enable lightning experience, click on your name at top of the page. You will find a link which says ‘switch to lightning experience’ and on clicking it you will switch to lightning experience immediately.

Enable My Domain

Lightning Components require to define a custom Salesforce domain name for your organization for security reason. Define new domain is simple and easy but it takes few minute to active. Domain name should be unique in salesforce. Link to lightning resources are in the following formate “https://my domain.lightning.force.com”.

Steps illustrating how to Enable a Domain:

  1. Navigate to Setup > Domain Management > My Domain.
  2. Decide the subdomain name you want to use in the URL field and enter it accordingly.
  3. Click Check Availability button. If your name is already registered in salesforce, choose a different one.
  4. Click Terms and Conditions checkbox.
  5. Click Register Domain.
  6. You will soon receive an email, when the domain name is ready for testing. It will take from 30 seconds to 24 hours, but normally it’s only a few minutes.
  7. You have to Log out of the Developer Edition Org and post logout you need to log into it again using your new custom domain. Then you have to click the login link that has been sent to you in the activation mail to your email.
  8. Next, roll out your new domain name to your organization. From the Setup menu, goto the Quick Find box and enter My Domain in it. Next select My Domain and then you have to click Deploy to Users.

Create an Apex Controller Class

Create a class to get data from Contacts.

  1. In your Development environment, click Your Name -> Developer Console.
  2. Goto Select File -> then New ->then goto Apex Class.
  3. For the class name, enter LightningContactListController and then click OK.
  4. In the body of the class, enter the following code.

NOTE :- @AuraEnabled enables client and server-side access to the controller method. Select File -> Save.

@AuraEnabled
public static List<Contact> getContacts() {
    return [Select Id, Name, Email, Title, Phone From Contact];
}

Create a Lightning Component

A lightning component is a collections of markup, JavaScript, and CSS.

  1. In the Developer Console, goto Select File -> then click New -> and then Lightning Component.
  2. For selecting the component name, first enter ContactList and subsequently click Submit.
  3. Edit the aura: component tag, and specify the controller to use. For example: 
    <aura:component controller="LightningContactListController">
  4. Select File > Save
  5. In the right panel, click Controller.
  6. In the body of the myAction Javascript controller function, add the following code. 
    var action = component.get("c.getContacts");
action.setCallback(this, function(data) {
    component.set("v.contacts", data.getReturnValue());
});
$A.enqueueAction(action);
  7. Select File | Save.

Get the Contacts List

Now add an event handler that calls your myAction function on initialization.

  1. In the Developer Console, click the ContactList.cmp tab.
  2. Add the following markup below the aura:component tag. 
    <aura:handler name="init" action="{!c.myAction}" value="{!this}" />

    This event handler calls the myAction client-side javascript controller to initialization.

  3. Now, below aura:handler, put the following attribute to create the list of contacts which are accessible to your component. 
    <aura:attribute name="contacts" type="Contact[]" />
  4. Select File | Save.

Render and Preview the Contact List

  1. Add the following markup below the handler and attribute tags that you created earlier. 
    <ul>
    <aura:iteration items="{!v.contacts}" var="contact">
        <li class="minli"> <h3>{!contact.Name}</h3> </li>
    </aura:iteration>
</ul>
  2. <aura:iteration> iterates over the list of contacts and displays their names.
    Select File -> Save.
    In the Developer Console you have to goto File -> New -> Lightning Application.
    For the application name, enter ContactListApp and click on the Submit button.
    In the body, you have to put the following markup to add your component to the app.

    <c:ContactList />
  3. Select File -> Save while on the application tab.
  4. In the button panel on the right, click Preview.

ContactList.cmp look like below code :-

<aura:component controller="Lightning_ContactList">
    <aura:handler name="init" action="{!c.myAction}" value="{!this}" />
    <aura:attribute name="contacts" type="Contact[]" />
    <ul>
        <aura:iteration items="{!v.contacts}" var="contact">
            <li class="minli"> <h3>{!contact.Name}</h3> </li>
        </aura:iteration>
    </ul>
</aura:component>

 

RELATED ARTICLESMORE FROM AUTHOR