Lightning Component Creation (Account List Example)

Hi,

This example explains you how to create a component and place the same into the Lightning app.

To create a Lignting Component we have different tools . For now we are going to use developer console to create Component.

Navigation:

Give Name "AccountsComponent"

After click on "Submit" you can get the Component with Lightning Bundle at right Panel.

Now create an apex class(Server Side Controller)  with "@Auraenabled" methods which will be used in the above component.

Controller:

public with sharing class B_Lightning_AccountCls {

     @Auraenabled

       public static List<Account> retrieveAccounts(){

                    List<Account> accountList = new List<Account>();

accountList = [select id,name,AnnualRevenue,Industry,Website  from Account limit 5];

                   return accountList;

}

}

Now include the controller in the component by using "controller" attribute.

<aura:component controller="B_Lightning_AccountCls">

</aura:component>

Use <aura:atrribute> tag to hold the values from the javascript controller .

<aura:attribute name="Accounts" type="Account[]"/>

Here the "init" handler  used for performing action when component initialized.

<aura:handler name="init" action="{!c.myAction}" value="this"/> 

Here "myAction" is  a method in "controller" which we can create from the "controller" in lightning bundle  .

Component Code:

<aura:component controller="B_Lightning_AccountCls">

    <ltng:require styles="{!$Resource.Lightning_slds+'/assets/styles/salesforce-lightning-design-system.css'}"/>

     <ltng:require styles="{!$Resource.Lightning_slds+'/assets/styles/salesforce-lightning-design-system.min.css'}"/>

    <aura:attribute name="Accounts" type="Account[]"/>

      <aura:handler name="init" action="{!c.myAction}" value="this"/>

    <div class="container">

        <div class="slds">

            <br/> 

            <ul class="slds-has-dividers--around-space">

                <li class="slds-item">

                    <div class="slds-tile slds-tile__detail">

                      <strong>Accounts Info</strong>

                     </div>

              </li>

                <aura:iteration  items="{!v.Accounts}" var="accountObj">

                     <li class="slds-item">

                        <div class="slds-tile slds-tile--board">

                          <p class="slds-truncate" title="Anypoint Connectors"><a href="javascript:void(0);">{!accountObj.Name}</a></p>

                          <div class="slds-tile__detail slds-text-body--small">

                            <p class="slds-text-heading--medium">{!accountObj.AnnualRevenue}</p>

                            <p class="slds-truncate"><a href="javascript:void(0);">{!accountObj.Website}</a></p>

                            <p class="slds-truncate">{!accountObj.Industry}</p>

                          </div>

                        </div>

                    </li>

                </aura:iteration>

            </ul>            

        </div>

    </div>

</aura:component>

Click on "Controller" to create method.

Controller Code:

({

myAction : function(component, event, helper) {

var  action = component.get("c.retrieveAccounts");

        action.setCallback(component,function(data){

            component.set("v.Accounts",data.getReturnValue());

        });

        $A.enqueueAction(action);

}

})

var  action = component.get("c.retrieveAccounts"); //This is used for invoking the method 

Now we have completed component creation.

Now create a lighning app to see our output:

Navigation:

Now Give Name "AccountsApp" for application:

Click on Submit  and then we can see app with the following tag:

Now include your component by using "<c:componentName/>

<aura:application>

    <c:AccountsComponent/>

</aura:application>

Note the if we are creating package use package namespace in the place of "c" for specifying the component.

Eg:<baluPackage:AccountsComponent/>

Here baluPckage is the name space.

To see your out put click on "Preview" in the Application right panel as shown below.

Output:

References:

https://www.lightningdesignsystem.com/components/tiles/

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