Wrapper Class In Lightning Component
Biswajeet
February 7, 2018 No Comments on Wrapper Class In Lightning Component
Lightning Component:
<!--
Name: ContactList.cmp
-->
<aura:component controller="ContactController">
<!--Declare Event Handlers-->
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<!--Declare Attributes-->
<aura:attribute name="contactList" type="ContactController.ContactWrapper[]" />
<aura:attribute name="isSelectAll" type="boolean" default="false"/>
<div class="slds-m-around_xx-large">
<h1 class="slds-text-heading--medium">Contacts</h1>
<br/>
<!--Contact List Table-->
<table class="slds-table slds-table--bordered slds-table--cell-buffer" role="grid">
<thead>
<tr class="slds-text-title--caps">
<th>
<label class="slds-checkbox">
<ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContacts}" aura:id="selectAll"/>
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account">Account</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.contactList}" var="con">
<tr>
<th>
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="checkContact" value="{!con.isSelected}" text="{!con.Id}"/>
<span class="slds-checkbox--faux" />
<span class="slds-form-element__label"></span>
</label>
</th>
<th scope="row">
<div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>
</th>
<td>
<div class="slds-truncate" title="{!con.Account}">{!con.Account}</div>
</td>
<th scope="row">
<div class="slds-truncate" title="{!con.Phone}">{!con.Phone}</div>
</th>
<td>
<div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
<div>
<br/>
<lightning:button label="Submit" class="slds-button_brand" onclick="{!c.handleSelectedContacts }" />
</div>
</div>
</aura:component>
Lightning JS Controller:
({
//get Contact List from apex controller
doInit : function(component, event, helper) {
var action = component.get("c.getContactList");
action.setCallback(this, function(result){
var state = result.getState();
if (component.isValid() && state === "SUCCESS"){
component.set("v.contactList",result.getReturnValue());
}
});
$A.enqueueAction(action);
},
//Select all contacts
handleSelectAllContacts: function(component, event, helper) {
var getID = component.get("v.contactList");
var checkvalue = component.find("selectAll").get("v.value");
var checkContact = component.find("checkContact");
if(checkvalue == true){
for(var i=0; i<checkContact.length; i++){
checkContact[i].set("v.value",true);
}
}
else{
for(var i=0; i<checkContact.length; i++){
checkContact[i].set("v.value",false);
}
}
},
//Process the selected contacts
handleSelectedContacts: function(component, event, helper) {
var contactList = component.get("v.contactList");
var isSelectAll = component.get("v.isSelectAll");
var selectedContacts = [];
if(isSelectAll){
selectedContacts = contactList;
}
else{
var k = 0;
for (var i=0; i<contactList.length; i++){
var c = contactList[i];
if(c.isSelected) {
selectedContacts[k] = c;
k++;
}
}
}
if(selectedContacts.length > 0){
var contactRecords = JSON.stringify(selectedContacts);
var action = component.get("c.processSelectedContacts");
action.setParams({
contactRecords : contactRecords
});
action.setCallback(this, function(result){
var state = result.getState();
if (component.isValid() && state === "SUCCESS"){
alert('Success in calling server side action');
}
else if(state == "ERROR"){
alert('Error in calling server side action');
}
});
$A.enqueueAction(action);
}
}
})
Apex Controller:
public class ContactController {
@AuraEnabled
Public static List<ContactWrapper> getContactList(){
List<ContactWrapper> contactList = new List<ContactWrapper>();
//get all contact list
List<Contact> conList = [SELECT Id, Name, Account.Name, Phone, Email FROM Contact LIMIT 10];
for(Contact con : conList){
ContactWrapper obj = new ContactWrapper();
obj.ContactId = con.Id;
obj.Name = con.Name;
obj.Account = con.Account.Name;
obj.Phone = con.Phone;
obj.Email = con.Email;
obj.isSelected = false;
contactList.add(obj);
}
return contactList;
}
@AuraEnabled
Public static void processSelectedContacts(string contactRecords){
system.debug('contactRecords-' + contactRecords);
List<ContactWrapper> contactList = new List<ContactWrapper>();
if(!string.isBlank(contactRecords)){
contactList = (List<ContactWrapper>)System.JSON.deserialize(contactRecords,List<ContactWrapper>.class);
system.debug('contactList-' + contactList);
}
}
public class ContactWrapper{
@AuraEnabled
public String ContactId {get;set;}
@AuraEnabled
public String Name {get;set;}
@AuraEnabled
public String Account {get;set;}
@AuraEnabled
public String Phone {get;set;}
@AuraEnabled
public String Email {get;set;}
@AuraEnabled
public boolean isSelected {get;set;}
}
}
