Salesforce.com: Getting Started with Lightning Component

We are creating a simple lightning component which will show some contacts on lightning app  and on lightning record page if we add that component to lightning page.
Typical Lightning App Will look like this as you note we just have one component in this application.
<aura:application extends=”force:slds”>
<c:ContactsListing />
</aura:application>
Lightning Component: A simple lightning component will have a controller, few attributes which will be used and handlers for various events like click, change the default is INIT which will be called on load of the component
<aura:component controller=”ContactListingAuraController” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes” access=”global” >
   <aura:attribute name=”lstContacts” type=”Contact[]”/>
    <aura:attribute name=”recordId” type=”Id” />
   <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />
<div style=”height:300px;overflow-y: auto;”>
<ul>
       <aura:iteration items=”{!v.lstContacts}” var=”item”>
           <li>
               <a href=”{! ‘#/sObject/’ + item.Id + ‘/view’}”>
                   <p>{!item.FirstName}</p>
               </a>
           </li>
       </aura:iteration>
   </ul>
   </div>
</aura:component>
Lightning Component Controller:
A lightnig component controller will have static methods and will have a annotation @Auraenabled

public class ContactListingAuraController {
   @AuraEnabled
   public static List<contact> getAllContacts() {
       return [select id, firstname,lastname from contact];
   }
   @AuraEnabled
   public static List<contact> findByID(String ContactID) {
       return [select id, firstname,lastname from contact where id=:ContactID];
   }
   }
Lightning Component Controller: Lightning component will have some methods which are defined in the controller.js of the component the default is init as mentioned below
({
doInit : function(component, event, helper) {
helper.pullAllContacts(component);
       //helper.SearchSelectedContact(component);
}
})

LIghtning Component Helpers: You can make your code modularize using helpers, you can have your logic on both controller or even can have in helpers

({
pullAllContacts : function(component) {
       var action = component.get(“c.getAllContacts”);
                    action.setCallback(this, function(response) {        
                       component.set(“v.lstContacts”, response.getReturnValue());
                   });
              $A.enqueueAction(action);

},
   SearchSelectedContact: function(component, event) {
       var action = component.get(“c.findByID”);
       var recordId = component.get(“v.recordId”);
       action.setParams({
         ContactID: recordId
       });
       action.setCallback(this, function(a) {
           component.set(“v.lstContacts”, a.getReturnValue());
       });
       $A.enqueueAction(action);   }})


Source : http://www.saasanalogy.com/getting-started-with-lightning-component/

Comments

Popular posts from this blog

Salesforce.com: Expression Operators in Salesforce lightning Components

Custom Calendar on VisualForce Page

Salesforce.com: Scheduled Apex