Apex Code Development You need to sign in to do that
Don't have an account?
Roopa S 1 im displaying account and related contacts using aura component...
i need to display 10 records in one page and i should display "PREVIOUS" and "NEXT" buttons to display remaining records. plz help me
Controller class
public class AccRelatedConC{
@AuraEnabled
public static List<Account> fetchAcc (){
return [SELECT Id, Name, Phone FROM Account];
}
@AuraEnabled
public static List<Contact> fetchCon (String recordId){
return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:recordId];
}
}
Component
<aura:component controller="AccRelatedConC"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" />
<aura:attribute name="accData" type="List"/>
<aura:attribute name="conData" type="List"/>
<aura:attribute name="show" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doinit}" />
<div class=" slds-page-header slds-text-heading--large slds-align--absolute-center">
{!v.PageHeading}
</div>
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accData}" var="row" indexVar="index">
<tr>
<th scope="row">
<div class="slds-truncate" >
<a onclick="{!c.showCon}" value="{!row}" data-index="{!index}">{!row.Name} </a>
</div>
</th>
<td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<br/>
<aura:if isTrue="{!v.show}">
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Related Contact Details</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.conData}" var="row2">
<tr>
<th scope="row"><div class="slds-truncate" title="{!row2.Name}">{!row2.Name}</div></th>
<td><div class="slds-truncate" title="{!row2.Phone}">{!row2.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-clearfix">
<div class="slds-page-header" role="banner">
<div class="slds-float_right">
<lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />
<lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
</div>
<p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
</div>
</div>
</div>
</aura:if>
</aura:component>
controller
({
doinit : function(component, event, helper) {
var action = component.get('c.fetchAcc');
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + allValues);
component.set('v.accData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
},
handleNext: function(component, event, helper) {
var pageNumber = component.get("v.PageNumber");
var pageSize = component.find("pageSize").get("v.value");
pageNumber++;
helper.getContactList(component, pageNumber, pageSize);
},
handlePrev: function(component, event, helper) {
var pageNumber = component.get("v.PageNumber");
var pageSize = component.find("pageSize").get("v.value");
pageNumber--;
helper.getContactList(component, pageNumber, pageSize);
},
onSelectChange: function(component, event, helper) {
var page = 1
var pageSize = component.find("pageSize").get("v.value");
helper.getContactList(component, page, pageSize);
},
showCon : function(component, event, helper){
component.set("v.show",true);
var idx = event.target.getAttribute('data-index');
console.log('idx---->>> ' + idx);
var rowRecord = component.get("v.accData")[idx];
console.log('rowRecord---->>> ' + JSON.stringify(rowRecord));
var action = component.get('c.fetchCon');
action.setParams({recordId : rowRecord.Id});
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
component.set('v.conData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
helper
({
getContactList: function(component, pageNumber, pageSize) {
var action = component.get("c.getContactData");
action.setParams({
"pageNumber": pageNumber,
"pageSize": pageSize
});
action.setCallback(this, function(result) {
var state = result.getState();
if (component.isValid() && state === "SUCCESS"){
var resultData = result.getReturnValue();
component.set("v.ContactList", resultData.contactList);
component.set("v.PageNumber", resultData.pageNumber);
component.set("v.TotalRecords", resultData.totalRecords);
component.set("v.RecordStart", resultData.recordStart);
component.set("v.RecordEnd", resultData.recordEnd);
component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));
}
});
$A.enqueueAction(action);
}
})
Controller class
public class AccRelatedConC{
@AuraEnabled
public static List<Account> fetchAcc (){
return [SELECT Id, Name, Phone FROM Account];
}
@AuraEnabled
public static List<Contact> fetchCon (String recordId){
return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:recordId];
}
}
Component
<aura:component controller="AccRelatedConC"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" />
<aura:attribute name="accData" type="List"/>
<aura:attribute name="conData" type="List"/>
<aura:attribute name="show" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doinit}" />
<div class=" slds-page-header slds-text-heading--large slds-align--absolute-center">
{!v.PageHeading}
</div>
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accData}" var="row" indexVar="index">
<tr>
<th scope="row">
<div class="slds-truncate" >
<a onclick="{!c.showCon}" value="{!row}" data-index="{!index}">{!row.Name} </a>
</div>
</th>
<td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<br/>
<aura:if isTrue="{!v.show}">
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Related Contact Details</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.conData}" var="row2">
<tr>
<th scope="row"><div class="slds-truncate" title="{!row2.Name}">{!row2.Name}</div></th>
<td><div class="slds-truncate" title="{!row2.Phone}">{!row2.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-clearfix">
<div class="slds-page-header" role="banner">
<div class="slds-float_right">
<lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />
<lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
</div>
<p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
</div>
</div>
</div>
</aura:if>
</aura:component>
controller
({
doinit : function(component, event, helper) {
var action = component.get('c.fetchAcc');
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + allValues);
component.set('v.accData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
},
handleNext: function(component, event, helper) {
var pageNumber = component.get("v.PageNumber");
var pageSize = component.find("pageSize").get("v.value");
pageNumber++;
helper.getContactList(component, pageNumber, pageSize);
},
handlePrev: function(component, event, helper) {
var pageNumber = component.get("v.PageNumber");
var pageSize = component.find("pageSize").get("v.value");
pageNumber--;
helper.getContactList(component, pageNumber, pageSize);
},
onSelectChange: function(component, event, helper) {
var page = 1
var pageSize = component.find("pageSize").get("v.value");
helper.getContactList(component, page, pageSize);
},
showCon : function(component, event, helper){
component.set("v.show",true);
var idx = event.target.getAttribute('data-index');
console.log('idx---->>> ' + idx);
var rowRecord = component.get("v.accData")[idx];
console.log('rowRecord---->>> ' + JSON.stringify(rowRecord));
var action = component.get('c.fetchCon');
action.setParams({recordId : rowRecord.Id});
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
component.set('v.conData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
helper
({
getContactList: function(component, pageNumber, pageSize) {
var action = component.get("c.getContactData");
action.setParams({
"pageNumber": pageNumber,
"pageSize": pageSize
});
action.setCallback(this, function(result) {
var state = result.getState();
if (component.isValid() && state === "SUCCESS"){
var resultData = result.getReturnValue();
component.set("v.ContactList", resultData.contactList);
component.set("v.PageNumber", resultData.pageNumber);
component.set("v.TotalRecords", resultData.totalRecords);
component.set("v.RecordStart", resultData.recordStart);
component.set("v.RecordEnd", resultData.recordEnd);
component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize));
}
});
$A.enqueueAction(action);
}
})
Try Below Code
CMP <aura:component controller="ContactAuraController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" /> <aura:attribute name="accData" type="List"/> <aura:attribute name="ContactList" type="Contact[]"/> <aura:attribute name="PageNumber" type="integer" default="1"/> <aura:attribute name="TotalPages" type="integer" default="0"/> <aura:attribute name="TotalRecords" type="integer" default="0"/> <aura:attribute name="RecordStart" type="integer" default="0"/> <aura:attribute name="RecordEnd" type="integer" default="0"/> <aura:attribute name="RecId" type="String"/> <aura:attribute name="show" type="boolean" default="false"/> <aura:handler name="init" value="{!this}" action="{!c.doinit}" /> <div class=" slds-page-header slds-text-heading--large slds-align--absolute-center"> {!v.PageHeading} </div> <div class="slds-section slds-is-open"> <h3 class="slds-section__title slds-theme_shade"> <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span> </h3> <br/> <div class="slds-float_right"> <ui:inputSelect aura:id="pageSize" label="Display Records Per Page: " change="{!c.onSelectChange}"> <ui:inputSelectOption text="10" label="10" value="true"/> <ui:inputSelectOption text="15" label="15"/> <ui:inputSelectOption text="20" label="20"/> </ui:inputSelect> <br/> </div> <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout"> <thead> <tr class="slds-text-heading--label"> <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th> <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th> </tr> </thead> <tbody> <aura:iteration items="{!v.accData}" var="row" indexVar="index"> <tr> <th scope="row"> <div class="slds-truncate" > <a onclick="{!c.showCon}" value="{!row}" data-index="{!index}">{!row.Name} </a> </div> </th> <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td> </tr> </aura:iteration> </tbody> </table> </div> <br/> <aura:if isTrue="{!v.show}"> <div class="slds-section slds-is-open"> <h3 class="slds-section__title slds-theme_shade"> <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Related Contact Details</span> </h3> <br/> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col"> <strong><div class="slds-truncate" title="Name">Name</div></strong> </th> </tr> </thead> <tbody> <aura:iteration items="{!v.ContactList}" var="con"> <tr> <th scope="row" data-label="Name"> <div class="slds-truncate" title="{!con.Name}">{!con.Name}</div> </th> </tr> </aura:iteration> </tbody> </table> <div class="slds-clearfix"> <div class="slds-page-header" role="banner"> <div class="slds-float_right"> <lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" /> <lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/> </div> <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.TotalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p> </div> </div> </div> </aura:if> </aura:component> COntroller ({ doinit : function(component, event, helper) { var action = component.get('c.fetchAcc'); action.setCallback(this, function(response){ var state = response.getState(); if(state === "SUCCESS"){ var allValues = response.getReturnValue(); console.log("allValues--->>> " + allValues); component.set('v.accData', allValues); } else if(state === "ERROR") { var errors = response.getError(); if(errors){ if(errors[0] && errors[0].message){ console.log("Error Message: " + errors[0].message); } } else{ console.log("Unknown Error"); } } }); $A.enqueueAction(action); }, handleNext: function(component, event, helper) { var pageNumber = component.get("v.PageNumber"); var pageSize = component.find("pageSize").get("v.value"); pageNumber++; helper.getContactList(component, pageNumber, pageSize,component.get("v.RecId")); }, handlePrev: function(component, event, helper) { var pageNumber = component.get("v.PageNumber"); var pageSize = component.find("pageSize").get("v.value"); pageNumber--; helper.getContactList(component, pageNumber, pageSize,component.get("v.RecId")); }, showCon : function(component, event, helper){ var pageNumber = component.get("v.PageNumber"); var pageSize = component.find("pageSize").get("v.value"); component.set("v.show",true); var idx = event.target.getAttribute('data-index'); console.log('idx---->>> ' + idx); var rowRecord = component.get("v.accData")[idx]; alert('rowRecord---->>> ' + JSON.stringify(rowRecord)); component.set("v.RecId",rowRecord.Id); helper.getContactList(component, pageNumber, pageSize,rowRecord.Id); }, onSelectChange: function(component, event, helper) { var page = 1 var pageSize = component.find("pageSize").get("v.value"); helper.getContactList(component, page, pageSize,component.get("v.RecId")); } }) HELPER ({ getContactList: function(component, pageNumber, pageSize,rowRecord) { var action = component.get("c.getContactData"); action.setParams({ "pageNumber": pageNumber, "pageSize": pageSize, "recordId": rowRecord }); action.setCallback(this, function(result) { var state = result.getState(); if (component.isValid() && state === "SUCCESS"){ component.set("v.show",true); var resultData = result.getReturnValue(); component.set("v.ContactList", resultData.contactList); component.set("v.PageNumber", resultData.pageNumber); component.set("v.TotalRecords", resultData.totalRecords); component.set("v.RecordStart", resultData.recordStart); component.set("v.RecordEnd", resultData.recordEnd); component.set("v.TotalPages", Math.ceil(resultData.totalRecords / pageSize)); } }); $A.enqueueAction(action); } }) APEX public class ContactAuraController { @AuraEnabled public static List<Account> fetchAcc (){ return [SELECT Id, Name, Phone FROM Account]; } @AuraEnabled public static ContactDataTableWrapper getContactData(Integer pageNumber, Integer pageSize,String recordId) { //Offset for SOQL Integer offset = (pageNumber - 1) * pageSize; //Total Records Integer totalRecords = [SELECT COUNT() FROM Contact]; Integer recordEnd = pageSize * pageNumber; //Instance of Contact DataTable Wrapper Class ContactDataTableWrapper objDT = new ContactDataTableWrapper(); objDT.pageSize = pageSize; objDT.pageNumber = pageNumber; objDT.recordStart = offset + 1; objDT.recordEnd = totalRecords >= recordEnd ? recordEnd : totalRecords; objDT.totalRecords = totalRecords; objDT.contactList = [SELECT Id, Name, Phone, Email FROM Contact Where AccountId =:recordId ORDER BY Name LIMIT :pageSize OFFSET :offset]; return objDT; } //Wrapper Class For Contact DataTable public class ContactDataTableWrapper { @AuraEnabled public Integer pageSize {get;set;} @AuraEnabled public Integer pageNumber {get;set;} @AuraEnabled public Integer totalRecords {get;set;} @AuraEnabled public Integer recordStart {get;set;} @AuraEnabled public Integer recordEnd {get;set;} @AuraEnabled public List<Contact> contactList {get;set;} } }Please Mark It As Best Answer If It HelpsThank You!
its displaying more than 10 records but it should display only 10 records per page.
and its not showing contacts related to particular account plz help me to solve that.
thank you
Click on Account And Scroll Down And You See A Section With Related Contacts As Shown In Image Below
Please Mark It As Best Answer If It Helps
Thank You!