Here today in the below post we will learn how to show records using custom data table in lightning component and maintain all selected records while moving from one page to another and finally add all the selected records.
To understand the concept in a better way i will using a component as a quick action on account object and using this component i will display all contacts related to Parent account of this account and after selecting the contacts from the list i will add this contacts to this Child account.
<aura:component controller="customContactApex" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
<aura:attribute name="contactList" type="list" />
<aura:attribute name="finalListToAdd" type="list" />
<aura:attribute name="contactListPaginateWise" type="list" />
<aura:attribute name="navigateType" type="string" default="initialLoad"/>
<aura:attribute name="totalRecords" type="integer" />
<aura:attribute name="pageNumber" type="integer" />
<aura:attribute name="lastPageNumber" type="integer" />
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr >
<div class="slds-form-element">
<div class="slds-form-element_control">
<label class="slds-checkbox">
<ui:inputCheckbox change="{!c.selectDeselectAll}"/>
<span class="slds-checkbox_faux"/>
<span class="slds-form-element_label"/>
</label>
</div>
</div>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Title">Title</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.contactListPaginateWise}" var="a">
<tr >
<th scope="row">
<div class="slds-form-element">
<div class="slds-form-element_control">
<label class="slds-checkbox">
<ui:inputCheckbox value="{!a.check}"/>
<span class="slds-checkbox_faux"/>
<span class="slds-form-element_label"/>
</label>
</div>
</div>
</th>
<th scope="row">
{!a.obj.Name}
</th>
<th scope="row">
{!a.obj.Title}
</th>
<th scope="row">
{!a.obj.Email}
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<aura:if isTrue="{!(v.pageNumber!=v.lastPageNumber)}">
<lightning:button label="Next" onclick="{!c.goToNext}"/>
</aura:if>
<aura:if isTrue="{!v.pageNumber!=1}">
<lightning:button label="Previous" onclick="{!c.goToPrevious}"/>
</aura:if>
<lightning:button label="Add Contacts" onclick="{!c.addAllSelectedContacts}"/>
Page {!v.pageNumber} of {!v.lastPageNumber}
</aura:component>
doInitialization : function (component, event, helper) {
var nt=component.get("v.navigateType");
component.set("v.pageNumber",1);
helper.helperMethod(component,nt);
},
goToNext: function(component, event, helper) {
var pgNumber=component.get("v.pageNumber");
pgNumber=pgNumber+1;
component.set("v.pageNumber",pgNumber);
component.set("v.navigateType",'next');
var ntType=component.get("v.navigateType");
helper.helperMethod(component,ntType);
},
goToPrevious: function(component, event, helper) {
var pgNumber=component.get("v.pageNumber");
pgNumber=pgNumber-1;
component.set("v.pageNumber",pgNumber);
component.set("v.navigateType",'previous');
var ntType=component.get("v.navigateType");
helper.helperMethod(component,ntType);
},
selectDeselectAll: function(component, event, helper){
// alert('In selectDeselectAll');
var trueFalseCheck=event.getSource().get("v.value");
alert('trueFalseCheck'+trueFalseCheck);
var conList=component.get("v.contactList");
var pagnitaList=component.get("v.contactListPaginateWise");
var conListUpd=[];
var pagnitaListUpd=[];
for(var i=0;i<conList.length;i++)
{
if(trueFalseCheck==true)
{
conList[i].check=true;
}
else
{
conList[i].check=false;
}
conListUpd.push(conList[i]);
}
component.set("v.contactList",conListUpd);
for(var i=0;i<pagnitaList.length;i++)
{
if(trueFalseCheck==true)
{
pagnitaList[i].check=true;
}
else
{
pagnitaList[i].check=false;
}
pagnitaListUpd.push(pagnitaList[i]);
}
component.set("v.contactListPaginateWise",pagnitaListUpd);
},
addAllSelectedContacts :function(component, event, helper){
var allSelectedContact=component.get("v.contactList");
// alert("allSelectedContact"+allSelectedContact);
var contactListToAdd=[];
for(var i=0;i < allSelectedContact.length;i++)
{
if(allSelectedContact[i].check==true)
{
alert("allSelectedContact[i].check==true");
contactListToAdd.push(allSelectedContact[i].obj);
}
}
component.set("v.finalListToAdd",contactListToAdd);
var finalListToAdd=component.get("v.finalListToAdd");
alert('finalListToAdd'+finalListToAdd);
var action=component.get('c.addAllSelectedContact');
var currentAccId=component.get("v.recordId");
action.setParams({
conList :finalListToAdd,
currentAccId:currentAccId
});
action.setCallback(this,function(response)
{
var state=response.getState();
if(state==="SUCCESS")
{
alert('Contact Inserted Successfully');
}
});
$A.enqueueAction(action);
}
})
({
helperMethod : function(component,type) {
if(type=='initialLoad')
{
var currentAccountId=component.get("v.recordId");
var action=component.get('c.getAllContactRelatedToParent');
var parentContactArray=[];
action.setParams({
currentAccId : currentAccountId,
});
action.setCallback(this,function(response){
var state=response.getState();
var resultData=response.getReturnValue();
var recordLength=response.getReturnValue().length;
component.set("v.totalRecords",recordLength);
var paginateData=[];
if(state==="SUCCESS")
{
component.set("v.contactList",resultData);
//alert('contactList'+component.get("v.contactList"));
for(var i=0;i<5;i++)
{
if(recordLength > i)
{
paginateData.push(resultData[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
component.set("v.lastPageNumber",Math.ceil(recordLength/5));
//alert("lastPageNumber"+component.get("v.lastPageNumber"));
}
});
$A.enqueueAction(action);
}
if(type=='next')
{
var pgNumber=component.get("v.pageNumber");
var limit=5*pgNumber;
var start=limit-5;
//alert('limit'+limit);
var paginateData=[];
var contactList=[];
contactList=component.get("v.contactList");
var recordLength=component.get("v.totalRecords");
for(var i=start;i<limit;i++)
{
if(recordLength > i)
{
paginateData.push(contactList[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
}
if(type=='previous')
{
var pgNumber=component.get("v.pageNumber");
var limit=5*pgNumber;
var start=limit-5;
// alert('limit'+limit);
var paginateData=[];
var contactList=[];
contactList=component.get("v.contactList");
var recordLength=component.get("v.totalRecords");
for(var i=start;i<limit;i++)
{
if(recordLength > i)
{
paginateData.push(contactList[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
}
}
})
To understand the concept in a better way i will using a component as a quick action on account object and using this component i will display all contacts related to Parent account of this account and after selecting the contacts from the list i will add this contacts to this Child account.
customContact.cmp
<aura:component controller="customContactApex" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInitialization}"/>
<aura:attribute name="contactList" type="list" />
<aura:attribute name="finalListToAdd" type="list" />
<aura:attribute name="contactListPaginateWise" type="list" />
<aura:attribute name="navigateType" type="string" default="initialLoad"/>
<aura:attribute name="totalRecords" type="integer" />
<aura:attribute name="pageNumber" type="integer" />
<aura:attribute name="lastPageNumber" type="integer" />
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr >
<div class="slds-form-element">
<div class="slds-form-element_control">
<label class="slds-checkbox">
<ui:inputCheckbox change="{!c.selectDeselectAll}"/>
<span class="slds-checkbox_faux"/>
<span class="slds-form-element_label"/>
</label>
</div>
</div>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Title">Title</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.contactListPaginateWise}" var="a">
<tr >
<th scope="row">
<div class="slds-form-element">
<div class="slds-form-element_control">
<label class="slds-checkbox">
<ui:inputCheckbox value="{!a.check}"/>
<span class="slds-checkbox_faux"/>
<span class="slds-form-element_label"/>
</label>
</div>
</div>
</th>
<th scope="row">
{!a.obj.Name}
</th>
<th scope="row">
{!a.obj.Title}
</th>
<th scope="row">
{!a.obj.Email}
</th>
</tr>
</aura:iteration>
</tbody>
</table>
<aura:if isTrue="{!(v.pageNumber!=v.lastPageNumber)}">
<lightning:button label="Next" onclick="{!c.goToNext}"/>
</aura:if>
<aura:if isTrue="{!v.pageNumber!=1}">
<lightning:button label="Previous" onclick="{!c.goToPrevious}"/>
</aura:if>
<lightning:button label="Add Contacts" onclick="{!c.addAllSelectedContacts}"/>
Page {!v.pageNumber} of {!v.lastPageNumber}
</aura:component>
customContactController.js
({doInitialization : function (component, event, helper) {
var nt=component.get("v.navigateType");
component.set("v.pageNumber",1);
helper.helperMethod(component,nt);
},
goToNext: function(component, event, helper) {
var pgNumber=component.get("v.pageNumber");
pgNumber=pgNumber+1;
component.set("v.pageNumber",pgNumber);
component.set("v.navigateType",'next');
var ntType=component.get("v.navigateType");
helper.helperMethod(component,ntType);
},
goToPrevious: function(component, event, helper) {
var pgNumber=component.get("v.pageNumber");
pgNumber=pgNumber-1;
component.set("v.pageNumber",pgNumber);
component.set("v.navigateType",'previous');
var ntType=component.get("v.navigateType");
helper.helperMethod(component,ntType);
},
selectDeselectAll: function(component, event, helper){
// alert('In selectDeselectAll');
var trueFalseCheck=event.getSource().get("v.value");
alert('trueFalseCheck'+trueFalseCheck);
var conList=component.get("v.contactList");
var pagnitaList=component.get("v.contactListPaginateWise");
var conListUpd=[];
var pagnitaListUpd=[];
for(var i=0;i<conList.length;i++)
{
if(trueFalseCheck==true)
{
conList[i].check=true;
}
else
{
conList[i].check=false;
}
conListUpd.push(conList[i]);
}
component.set("v.contactList",conListUpd);
for(var i=0;i<pagnitaList.length;i++)
{
if(trueFalseCheck==true)
{
pagnitaList[i].check=true;
}
else
{
pagnitaList[i].check=false;
}
pagnitaListUpd.push(pagnitaList[i]);
}
component.set("v.contactListPaginateWise",pagnitaListUpd);
},
addAllSelectedContacts :function(component, event, helper){
var allSelectedContact=component.get("v.contactList");
// alert("allSelectedContact"+allSelectedContact);
var contactListToAdd=[];
for(var i=0;i < allSelectedContact.length;i++)
{
if(allSelectedContact[i].check==true)
{
alert("allSelectedContact[i].check==true");
contactListToAdd.push(allSelectedContact[i].obj);
}
}
component.set("v.finalListToAdd",contactListToAdd);
var finalListToAdd=component.get("v.finalListToAdd");
alert('finalListToAdd'+finalListToAdd);
var action=component.get('c.addAllSelectedContact');
var currentAccId=component.get("v.recordId");
action.setParams({
conList :finalListToAdd,
currentAccId:currentAccId
});
action.setCallback(this,function(response)
{
var state=response.getState();
if(state==="SUCCESS")
{
alert('Contact Inserted Successfully');
}
});
$A.enqueueAction(action);
}
})
customContactHelper.js
({
helperMethod : function(component,type) {
if(type=='initialLoad')
{
var currentAccountId=component.get("v.recordId");
var action=component.get('c.getAllContactRelatedToParent');
var parentContactArray=[];
action.setParams({
currentAccId : currentAccountId,
});
action.setCallback(this,function(response){
var state=response.getState();
var resultData=response.getReturnValue();
var recordLength=response.getReturnValue().length;
component.set("v.totalRecords",recordLength);
var paginateData=[];
if(state==="SUCCESS")
{
component.set("v.contactList",resultData);
//alert('contactList'+component.get("v.contactList"));
for(var i=0;i<5;i++)
{
if(recordLength > i)
{
paginateData.push(resultData[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
component.set("v.lastPageNumber",Math.ceil(recordLength/5));
//alert("lastPageNumber"+component.get("v.lastPageNumber"));
}
});
$A.enqueueAction(action);
}
if(type=='next')
{
var pgNumber=component.get("v.pageNumber");
var limit=5*pgNumber;
var start=limit-5;
//alert('limit'+limit);
var paginateData=[];
var contactList=[];
contactList=component.get("v.contactList");
var recordLength=component.get("v.totalRecords");
for(var i=start;i<limit;i++)
{
if(recordLength > i)
{
paginateData.push(contactList[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
}
if(type=='previous')
{
var pgNumber=component.get("v.pageNumber");
var limit=5*pgNumber;
var start=limit-5;
// alert('limit'+limit);
var paginateData=[];
var contactList=[];
contactList=component.get("v.contactList");
var recordLength=component.get("v.totalRecords");
for(var i=start;i<limit;i++)
{
if(recordLength > i)
{
paginateData.push(contactList[i]);
}
}
component.set("v.contactListPaginateWise",paginateData);
}
}
})
customContactApex.apxc
public class customContactApex {
@AuraEnabled
public static list<wrapperClass> getAllContactRelatedToParent(string currentAccId) {
string parentAccId;
list<wrapperClass> wrapperList=new list<wrapperClass>();
Account acc = [select id, name, ParentId from account where id =: currentAccId];
parentAccId = acc.ParentId;
for(contact con:[Select id, name, title, email, phone from contact where accountid =: parentAccId])
{
wrapperList.add(new wrapperClass(false,con));
}
//wrapperClass wObj = new wrapperClass(false, conList);
return wrapperList;
}
@AuraEnabled
public static void addAllSelectedContact(list<contact> conList,string currentAccId)
{
system.debug('Function called'+conList);
system.debug('currentAccId'+currentAccId);
list<contact> finalConList=new list<contact>();
for(integer i=0;i<conList.size();i++)
{
contact obj=new contact();
obj.lastName=conList[i].Name;
obj.phone=conList[i].phone;
obj.accountId=currentAccId;
finalConList.add(obj);
}
insert finalConList;
}
public class wrapperClass {
@AuraEnabled
public boolean check {
get;
set;
}
@AuraEnabled
public contact obj{
get;
set;
}
public wrapperClass(boolean check, contact obj) {
this.check = check;
this.obj = obj;
}
}
}
TAGS:
Pagination in Custom data table to show record and add selected records in lightning component,lightning pagination examples,lightning pagination examples,how to implement pagination in lightning component,client side pagination in lightning component,dynamic pagination in lightning,lightning datatable,,lightning datatable checkbox,dynamic data table lightning component.
No comments:
Post a Comment