Let’s understand this with a use case to fetch data from the Salesforce org show all the contacts over the table and create a form to create contacts in Salesforce Org and also show them over the table and also adds a delete functionality in the table
Component-
<aura:component implements="flexipage:availableForAllPageTypes,
flexipage:availableForRecordHome,
force:hasRecordId" controller="ContactList">
<aura:attribute name="nameOfCon" type="String" />
<aura:attribute name="mobileNumber" type="Integer" />
<aura:attribute name="myData" type="Contact[]"/>
<Center ><h1 class="heading"><b>Salesforce Sky</b></h1></Center>
<!-- FORM -->
<div class="slds-grid slds-box slds-p-top_none slds-gutters" style="height:700px">
<div class="slds-col blue slds-align_absolute-center ">
<div class="white slds-align_absolute-center">
<div class="form ">
<center><h1 style="font-size:30px">New Contact</h1></center><br/>
<lightning:input class="input" aura:id="Name" label="Name"
required="true" value="{!v.nameOfCon}"/>
<lightning:input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
class="input" aura:id="Mobile" label="Mobile" required="true" value="{!v.mobileNumber}"/><br/>
<center><lightning:button class="button" label="Add" type="button"
onclick="{!c.AddContact}"/></center>
</div>
</div>
</div>
<!-- TABLE -->
<div class="slds-col pink">
<div class="" >
<table class="slds-table slds-table_cell-buffer
slds-table_bordered slds-table_striped" style="margin-top:140px; align:center;">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<aura:iteration var="student" indexVar="index" items="{!v.myData}">
<tr>
<td>{!index + 1} </td>
<td>{!student.names}</td>
<td>{!student.mobile}</td>
<td><lightning:button class="button"
label="Delete" title="{!index}" onclick="{!c.DelContact}"/> </td>
</tr>
</aura:iteration>
</table>
</div>
</div>
</div>
</aura:component>
Controller –
({
AddContact : function(com, event, helper) {
helper.CreateContact(com, event, helper);
},
DelContact : function(com,event){
var selectCon = event.getSource().get("v.title");
console.log(selectCon);
var myList = com.get("v.myData");
myList.splice(selectCon, 1);
com.set("v.myData",myList);
console.log(myList);
}
})
Helper –
({
CreateContact : function() {
var data = com.get("v.myData");
if(data){
data.push({
names:com.get("v.nameOfCon"),
mobile:com.get("v.mobileNumber")
})
console.log('if vala ');
}
else{
data =[];
data.push({
names:com.get("v.nameOfCon"),
mobile:com.get("v.mobileNumber")
})
console.log('else vala ');
}
com.set("v.myData",data) ;
//step 1
var eveVal = com.get('c.createContactSingle');
//step 2
eveVal.setParams({
con : com.get('v.myData')
});
//step 3
eveVal.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' ||state === 'DRAFT'){
var responseValue = response.getReturnValue();
compEve.fire();
}
},'ALL');
//step 4
$A.enqueueAction(eveVal);
com.set("v.nameOfCon","");
com.set("v.mobileNumber","");
console.log(data);
}
})
Style –
.THIS .heading { font-size:30px;
}
.THIS .blue{
background-color:#00FFFF;
width:40%;
height:100%;
border-color:black;
}
.THIS .form{
width:290px;
}
.THIS .white{
background-color:white;
height:70%;
width:65%;
border-radius:20px;
}
.THIS .pink{
background-color:White;
width:60%;
height:100%;
border-color:white;
}
.THIS .button{
background-color: blue;
border-radius: 0px;
color: white;
padding: 12px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
width: 120px;
height:50px;
}
Apex Controller –
public class ContactList {
@AuraEnabled
public static List<Contact> getContactList(String accountId){
List<Contact> contactList = new List<Contact>([SELECT FirstName, LastName, Id, Name, Email, Phone
From Contact
WHERE Email !=null
AND AccountId = :accountId]);
return contactList;
}
@AuraEnabled
public static Contact createContactSingle(Contact con){
insert con;
return con;
}
}
Preview –