How to Create Lightning Component: -
Before start coding we will see where we will write code for lightning components,
1. In developer Console --> Goto Developer Console --> select File --> New --> Lightning Component
2. we can write in ecllipse editor, but for compilation we have save that code in salesforce
AIM : Create a simple lightning component to fetch account records and display on lightning App
Required lightning components: <Aura:Component>, <Aura:attribute>, <aura:handler>, UI Controller and apex class
Component Code:-
<aura:component controller="TechSoft.getActInfo">
<aura:attribute
name="accountId" type="String" default=" " />
<aura:attribute
name="accountlst" type="account[]" />
<aura:handler name="init"
value="{!this}" action="{!c.getAcctInfo}" />
<table>
<thead>
<tr><td>Account name</td><td>Account
Phone</td></tr>
</thead>
<aura:iteration items="{!v.accountlst}" var="acct" >
<tbody>
<tr>
<td>
<div class="slds-truncate"
title="Name">{!acct.Name}</div>
</td>
<td>
<div class="slds-truncate"
title="Phone">{!acct.Phone}</div>
</td>
</tr>
</tbody>
</aura:iteration>
</table>
</aura:component>
Controller.js:-
({
getAcctInfo :
function(component, event, helper) {
var action =
component.get("c.getaccountData");
action.setCallback(this,function(response){
var state =
response.getState();
if(state="SUCCESS"){
var items
= response.getReturnValue();
component.set("v.accountlst",items);
}
});
$A.enqueueAction(action);
}
})
Apex Class:-
public class getActInfo {
@AuraEnabled
public static list<account> getaccountData(){
return [select Name,
phone,AccountNumber from Account];
}
}
Output:-
