Create a lightning component to display list of 10 accounts name.

Description:
Create a lightning component which will responsible for displaying 10 account names.

Note: As our main aim is to understand how to create a lightning component and how it is interacting with salesforce server side (Apex class, data model), so this post is only focusing on the detail flow, but not on the lightning styling or other fine tuning ting like design pattern etc.

Please follow the below steps one by one,

• Open developer console and create a new lightning component [New>Lightning Component]

• It will open <New Lightning Bundle> modal, where give your component name (ViewListOfAccount) and description (optional, but use it for best practice).

• After successful creation of lightning component, it will crate an aura-bundle (component, controller, helper etc.) For simplicity we will only use component and controller from this bundle. Now click on component and copy-paste the below code same for our example.

[NOTE : Before copy paste below component's code base just create an apex class named as "ViewListOfAccountCtrl", because this component has a reference of this apex class. Code base is described later.]

===========================================
<aura:component implements="force:lightningQuickAction"
                controller="ViewListOfAccountCtrl">
<!-- attribute declaration -->
    <aura:attribute name="listOfAccounts" type="List"/>
    
    <!-- hadlerMethod declaration -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:iteration var="acc" items="{!v.listOfAccounts}">
        <ui:outputText value="{!acc.Name}"/><br/>
    </aura:iteration>
</aura:component>

===========================================

• Now click on controller and copy-paste the below code same for our example.

({
 /**
  * @name:        doInit      
  * @date:        13 Dec 2017
  * @description: This method is call automatically when this component hit first time.
  *      For for simplicity purposes, we are calling this component from a button/action click under account detail page.
  *      This method simply call a server side controller method and fetch 10 account records.
  **/
    doInit: function(component, event, helper) {
        /** Server side controller calling logic. **/
        
        /*<getListOfAccounts> is server side controller method, 
         * which return list of 10 account records.*/
        var action = component.get("c.getListOfAccounts");
        
        action.setCallback(this, function(response){
            /*<response.getState()> return response status as SUCCESS/ERROR/INCOMPLETE etc.*/
            var state = response.getState();
            /*If response from server side is <SUCCESS>, then we will set response (list of accouts)
             *under lightning attribute <listOfAccounts> (defined under ViewListOfAccount.cmp)*/
            if (state === "SUCCESS"){
                var lstOfAcc = response.getReturnValue();
                console.log("State === > "+lstOfAcc);
             if(lstOfAcc != null)
                 component.set("v.listOfAccounts", lstOfAcc);
            }
        });
        
        $A.enqueueAction(action);
    }
})

• Now, our aim is to displaying 10 account name. So, we have to create a server side apex class, where we can create a method, which will return list of 10 account records. This class is generally called as server side controller for your lightning component. For this example I am creating a controller apex class named as ViewListOfAccountCtrl , under this class I have to create a method which will return list of 10 Account records. Suppose the method name is getListOfAccounts(). Now as this method will be called from client side lightning component, so it should be annotated with @AuraEnabled keyword. Please check the below code sample.         

/**
  * @name:        ViewListOfAccountCtrl      
  * @date:        13 Dec 2017
  * @description: This is the server side controller class for <ViewListOfAccount> lightning component.
  *      All the server side action items (like insert, update, select etc.) will be perform here.
***/
public class ViewListOfAccountCtrl {
    /**
   * @name:        getListOfAccounts      
      * @date:        13 Dec 2017
      * @description: This method is responsible to return max 10 number of account records. As this method is calling from
      *      client side lighthing component, so this should be annoted with <@AuraEnabled>.
 ***/
    @AuraEnabled
    public static List<Account> getListOfAccounts(){
        return [SELECT Id, Name FROM Account LIMIT 10];
    }
}

• We have done our development and now our aim is to execute this component to check our result. For simplicity I want to call this component using a action button under Account detail page and for the same we have to crate an quick action for Account object and set this action in account page layout. Once done we can execute our component by click on action button. For the same please do the following steps,
• Go to Account object and click on link named as "Buttons, Links and Actions". Now create an new action by click on "New Action" button.

• Click on this button will open "New Action" window where we have to add the required detail to create the new action. Select "Action Type" as "Lightning Component", "Lightning Component" as "c:ViewListOfAccount", "Height" as "250px", "Label" as "View List of Account" and give the "Description".

• Now add this action under account page layout and open any account record. Here you will see the "View List of Account" action button on the top - left corner of account detail page. Click on this button will open "View List of Account" modal with maximum 10 account name. (Note: before execute the component, please create some account for testing).