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;} } }