Build your first Lightning Component

Lightning Component is a framework to build Salesforce applications faster. If you are using Salesforce1, you already experiencing the Lightning. It is based on an open source project called Aura framework. Aura is a UI framework for developing web applications for mobile and desktop devices.

Before get started, it’s better to understand why we need the Lightning components?  A Lightning Component is nothing but bundles of resources and it can be shared across multiple projects and it results in improved productivity. Lightning Components are classified as Standard Components, Custom Components,  and AppExchange Components.

Standard Component is nothing but the components built by Salesforce and has different levels of features like Left navigation, Feed items, Tasks, and Publisher bar components.

Custom Component are the components built by developers. You can build and use your own component. Some of the examples of  Custom Components are Sliders, Multi-view charts, and so on.

AppExchange Component is nothing but the components built by Salesforce Partners like Dynamic Maps, Custom Charts, Custom data layout, and so on.

Let’s see how components work: 

Basically,  you create a component to render it on the screen (html). During the rendering, lot of events occur,  like Listening for Events, Configure Attributes, and Fire Events.

Listen for Events: It is an important aspect of the component. We can hook into these events and make other things happen within the components.

1. Data updated

2. Screen tapped

3. Another component changed

4. Network offline

Configure Attributes: It always passes data into and out of components. It controls the behavior the data that might be passed to your component:

1. Set color

2. Set object

3. Get user

Fire Events: We can fire events that other component can listen for and then react too.

1. Record saved

2. List scrolled

3. Save offline

4. Color changed

Component bundles contain Documentation, Style, Helper, Controller, Components, and Event handler.

Let’s get started with build your first Lightning Component. Here, we are going to fetch set of contact records and display them in components.

Log into Salesforce instance and click your name in right top corner and click Developer Console.

On Developer Console, go to File / New / Lightning Component 

Enter the Component name and click Submit 

Once your new lightning bundle is created, click on Components in right side menu

Use below code to create a component “MyLightningComponent.cmp”

<aura:component controller="LightningCtrl" implements="flexipage:availableForAllPageTypes"> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <aura:attribute name="rec" type="Object" /> 
    <br></br> 
<ul> 
    <aura:iteration items="{!v.rec}" var="curr"> 
            <li> 
                <ui:outputText value="{!curr.Name}"/><br/> 
                <ui:outputText value="{!curr.Phone}"/><br/> 
                <ui:outputText value="{!curr.Email}"/> 
            </li> 
        </aura:iteration> 
    </ul> 
</aura:component>

Now click on Controller in same right menu and use below code and save it “MyLightningComponentController.js”

({ 
    doInit : function(component, event, helper) { 
        var action = component.get("c.getContacts"); 
        action.setCallback(this, function(response){ 
            component.set("v.rec", response.getReturnValue()); 
        }); 
     $A.enqueueAction(action); 
    } 
})

Also, create apex controller to fetch contact records “LightningCtrl.apxc”

public class LightningCtrl { 
@AuraEnabled 
    public static List<Contact> getContacts(){ 
        return [Select Name, Phone, Email From Contact limit 20]; 
    } 
}

There is a new annotation in Apex which is called @AuraEnabled. If we use this annotation, Lightning Components can call this controller. Once everything is ready,  you have to create a lightning application to preview this component.

Go to File / New / Lightning Application in Developer Console 

Use below code and save the app “MyLightningApp.app”. Here we just used the component what we created now.

<aura:application > 
    <h1>My First Ligtning App</h1> 
    <c:MyLightningComponent /> 
</aura:application>

Now, go ahead and click the Preview button from right menu,  and you should be able to see the list of contacts in browser like below.

Reference: 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/

Social media: Build Your First Salesforce Lightning Component