You need to sign in to do that
Don't have an account?
Amit Pamnani
Lightning Component: Refresh/Rerender AccountList when a new Account is created
I have created a Lightning component which displays a list of accounts with paginantion. Inside that another lightning component is integrated which creates a new account record.So now I want when a new account is created then the account list should be refreshed i.e the outer component data should re render. Below is my code.Please suggest
************************AccountList.cmp*********************************
<aura:component controller="AccountLightningController" implements="force:appHostable">
<ltng:require
styles="{!$Resource.SLDS261 +
'/styles/salesforce-lightning-design-system.min.css'}" />
<aura:attribute name="accountlist" type="Account[]"/>
<!-- Pagination -->
<aura:attribute name="paginationList" type="Account[]"/>
<aura:attribute name="pageSize" type="Integer" default="8"/>
<aura:attribute name="totalSize" type="Integer"/>
<aura:attribute name="start" type="Integer" />
<aura:attribute name="end" type="Integer"/>
<aura:attribute name="recorddisplayed" type="Integer"/>
<!-- Pagination -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:layout class="slds-page-header slds-p-around--large">
<lightning:layoutItem>
<lightning:icon iconName="standard:account" alternativeText="My Accounts"/>
</lightning:layoutItem>
<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">Accounts</h1>
<h2 class="slds-text-heading--medium">My Accounts</h2>
</div>
</lightning:layoutItem>
<lightning:layoutItem>
<lightning:icon iconName="custom:product2" alternativeText="form"/>
</lightning:layoutItem>
</lightning:layout>
<c:NewAccountCreation/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="12">
<fieldset class="slds-box slds-theme--default slds-container--x-large">
<legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--large">Account List</legend>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-heading_medium">
<th >Name</th>
<!--<th >AccountNumber</th>-->
<th >Phone</th>
<th >Type</th>
<th >Active</th>
</tr>
</thead>
<aura:iteration items="{!v.paginationList}" var="account">
<tbody>
<tr>
<td><a href="{!'/one/one.app?#/sObject/'+ account.Id + '/view'}" target="_self">{!account.Name}</a></td>
<!--<td><ui:outputtext value="{!account.AccountNumber}"/></td>-->
<td><ui:outputtext value="{!account.Phone}"/></td>
<td><ui:outputtext value="{!account.Type}"/></td>
<td><ui:outputtext value="{!account.Active__c}"/></td>
</tr>
<!--<c:ContactListComponent conlist="{!account.Contacts}"/>-->
</tbody>
</aura:iteration>
</table>
<br/><br/>
<!-- Pagination -->
<div class="slds-text-heading--medium" style="width:100%;padding-left:400px">
<lightning:button label="Previous" variant="brand" disabled="{!v.start == 0}" onclick="{!c.previous}" />
<lightning:button label="Next" variant="brand" disabled="{!v.end >= v.totalSize}" onclick="{!c.next}" />
</div>
<!--Pagination-->
</fieldset>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
****************************AccountListController.js***************************
({
doInit : function(component, event, helper) {
helper.getacclist(component);
},
next : function(component, event, helper)
{
helper.gonext(component);
},
previous : function(component, event, helper)
{
helper.goprevious(component);
},
})
********************************AccountListHelper.js******************************************
({
getacclist : function(component) {
var acclist = component.get("c.getaccountlist");
var pageSize = component.get("v.pageSize");
acclist.setCallback(this,function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS")
{
component.set("v.accountlist",acclist.getReturnValue());
component.set("v.totalSize", component.get("v.accountlist").length);
component.set("v.start",0);
component.set("v.end",pageSize-1);
var paginationList = [];
for(var i=0; i< pageSize; i++)
{
paginationList.push(response.getReturnValue()[i]);
}
component.set('v.paginationList', paginationList);
}
});
$A.enqueueAction(acclist);
},
gonext : function(component)
{
var accountList = component.get("v.accountlist");
var end = component.get("v.end");
var start = component.get("v.start");
var pageSize = component.get("v.pageSize");
var paginationList = [];
var accountListSize = component.get("v.accountlist").length;
if( pageSize > (accountListSize-end)){
pageSize = (accountListSize-end);
}
var counter = 0;
for(var i=end+1; i<end+pageSize+1; i++)
{
if(accountList.length > end)
{
paginationList.push(accountList[i]);
counter ++ ;
}
}
start = start + counter;
end = end + counter;
component.set("v.start",start);
component.set("v.end",end);
component.set('v.paginationList', paginationList);
},
goprevious : function(component)
{
var accountList = component.get("v.accountlist");
var end = component.get("v.end");
var start = component.get("v.start");
var pageSize = component.get("v.pageSize");
var paginationList = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++)
{
if(i > -1)
{
paginationList.push(accountList[i]);
counter ++;
}
else
{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.start",start);
component.set("v.end",end);
component.set('v.paginationList', paginationList);
},
})
*********************************************************************************************************************************
Other Component - NewAccountCreation.cmp
******************************************************************************************************************************
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global" controller="AccountLightningController">
<!-- Include Static Resource-->
<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- Define Attribute-->
<aura:attribute name="account" type="Account" default="{'sobjectType': 'Account',
'Name': '',
'Phone': '',
'Type': '',
'Active__c': ''
}"/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div aria-labelledby="newaccountform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--small
slds-p-vertical--medium">New Account</legend>
<form class="slds-form--stacked">
<lightning:input aura:id="accname" label="Account Name"
name="accountname"
value="{!v.account.Name}"
required="true"/>
<lightning:input type="number" aura:id="accphone" label="Phone"
name="phone"
value="{!v.account.Phone}"/>
<div class="row">
<p class="title">Type</p>
<ui:inputSelect class="slds-select" aura:id="InputSelectDynamic" value="{!v.account.Type}" required="true" />
</div>
<div class="row">
<p class="title">Active</p>
<ui:inputSelect class="slds-select" aura:id="InputSelectActiveDynamic" value="{!v.account.Active__c}" required="true" />
</div>
<lightning:button label="Create Account"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.create}"/>
</form>
</fieldset>
</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
*******************************************NewAccountCreationController.js******************************
({
create : function(component, event, helper) {
helper.createaccount(component,event);
},
})
************************************NewAccountCreationHelper.js*************************************
({
createaccount : function(component,event) {
var account = component.get("v.account");
var action = component.get("c.createRecord");
action.setParams({
acc : account
});
action.setCallback(this,function(a){
var state = a.getState();
if(state == "SUCCESS"){
var newAccount = {'sobjectType': 'Account',
'Name': '',
'Phone': '',
'Type': '',
'Active__c': ''
};
component.set("v.account",newAccount);
alert('Record is Created Successfully');
} else if(state == "ERROR"){
alert('Error in calling server side action');
}
});
$A.enqueueAction(action);
},
})
***************************************Apex Contrller - AccountLightningController.aspx***********************************
public class AccountLightningController {
@AuraEnabled
public static List<Account> getaccountlist()
{
return [select Id,Name,AccountNumber,Phone,Type,Active__c,(select Id,Name,Email,Phone,Title from Contacts) from Account order by createddate desc];
}
@AuraEnabled
public static void createRecord (Account acc)
{
insert acc;
}
}
*******************************************************************************************************************
************************AccountList.cmp*********************************
<aura:component controller="AccountLightningController" implements="force:appHostable">
<ltng:require
styles="{!$Resource.SLDS261 +
'/styles/salesforce-lightning-design-system.min.css'}" />
<aura:attribute name="accountlist" type="Account[]"/>
<!-- Pagination -->
<aura:attribute name="paginationList" type="Account[]"/>
<aura:attribute name="pageSize" type="Integer" default="8"/>
<aura:attribute name="totalSize" type="Integer"/>
<aura:attribute name="start" type="Integer" />
<aura:attribute name="end" type="Integer"/>
<aura:attribute name="recorddisplayed" type="Integer"/>
<!-- Pagination -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:layout class="slds-page-header slds-p-around--large">
<lightning:layoutItem>
<lightning:icon iconName="standard:account" alternativeText="My Accounts"/>
</lightning:layoutItem>
<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">Accounts</h1>
<h2 class="slds-text-heading--medium">My Accounts</h2>
</div>
</lightning:layoutItem>
<lightning:layoutItem>
<lightning:icon iconName="custom:product2" alternativeText="form"/>
</lightning:layoutItem>
</lightning:layout>
<c:NewAccountCreation/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="12">
<fieldset class="slds-box slds-theme--default slds-container--x-large">
<legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--large">Account List</legend>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-heading_medium">
<th >Name</th>
<!--<th >AccountNumber</th>-->
<th >Phone</th>
<th >Type</th>
<th >Active</th>
</tr>
</thead>
<aura:iteration items="{!v.paginationList}" var="account">
<tbody>
<tr>
<td><a href="{!'/one/one.app?#/sObject/'+ account.Id + '/view'}" target="_self">{!account.Name}</a></td>
<!--<td><ui:outputtext value="{!account.AccountNumber}"/></td>-->
<td><ui:outputtext value="{!account.Phone}"/></td>
<td><ui:outputtext value="{!account.Type}"/></td>
<td><ui:outputtext value="{!account.Active__c}"/></td>
</tr>
<!--<c:ContactListComponent conlist="{!account.Contacts}"/>-->
</tbody>
</aura:iteration>
</table>
<br/><br/>
<!-- Pagination -->
<div class="slds-text-heading--medium" style="width:100%;padding-left:400px">
<lightning:button label="Previous" variant="brand" disabled="{!v.start == 0}" onclick="{!c.previous}" />
<lightning:button label="Next" variant="brand" disabled="{!v.end >= v.totalSize}" onclick="{!c.next}" />
</div>
<!--Pagination-->
</fieldset>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
****************************AccountListController.js***************************
({
doInit : function(component, event, helper) {
helper.getacclist(component);
},
next : function(component, event, helper)
{
helper.gonext(component);
},
previous : function(component, event, helper)
{
helper.goprevious(component);
},
})
********************************AccountListHelper.js******************************************
({
getacclist : function(component) {
var acclist = component.get("c.getaccountlist");
var pageSize = component.get("v.pageSize");
acclist.setCallback(this,function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS")
{
component.set("v.accountlist",acclist.getReturnValue());
component.set("v.totalSize", component.get("v.accountlist").length);
component.set("v.start",0);
component.set("v.end",pageSize-1);
var paginationList = [];
for(var i=0; i< pageSize; i++)
{
paginationList.push(response.getReturnValue()[i]);
}
component.set('v.paginationList', paginationList);
}
});
$A.enqueueAction(acclist);
},
gonext : function(component)
{
var accountList = component.get("v.accountlist");
var end = component.get("v.end");
var start = component.get("v.start");
var pageSize = component.get("v.pageSize");
var paginationList = [];
var accountListSize = component.get("v.accountlist").length;
if( pageSize > (accountListSize-end)){
pageSize = (accountListSize-end);
}
var counter = 0;
for(var i=end+1; i<end+pageSize+1; i++)
{
if(accountList.length > end)
{
paginationList.push(accountList[i]);
counter ++ ;
}
}
start = start + counter;
end = end + counter;
component.set("v.start",start);
component.set("v.end",end);
component.set('v.paginationList', paginationList);
},
goprevious : function(component)
{
var accountList = component.get("v.accountlist");
var end = component.get("v.end");
var start = component.get("v.start");
var pageSize = component.get("v.pageSize");
var paginationList = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++)
{
if(i > -1)
{
paginationList.push(accountList[i]);
counter ++;
}
else
{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.start",start);
component.set("v.end",end);
component.set('v.paginationList', paginationList);
},
})
*********************************************************************************************************************************
Other Component - NewAccountCreation.cmp
******************************************************************************************************************************
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global" controller="AccountLightningController">
<!-- Include Static Resource-->
<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- Define Attribute-->
<aura:attribute name="account" type="Account" default="{'sobjectType': 'Account',
'Name': '',
'Phone': '',
'Type': '',
'Active__c': ''
}"/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<div aria-labelledby="newaccountform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--small
slds-p-vertical--medium">New Account</legend>
<form class="slds-form--stacked">
<lightning:input aura:id="accname" label="Account Name"
name="accountname"
value="{!v.account.Name}"
required="true"/>
<lightning:input type="number" aura:id="accphone" label="Phone"
name="phone"
value="{!v.account.Phone}"/>
<div class="row">
<p class="title">Type</p>
<ui:inputSelect class="slds-select" aura:id="InputSelectDynamic" value="{!v.account.Type}" required="true" />
</div>
<div class="row">
<p class="title">Active</p>
<ui:inputSelect class="slds-select" aura:id="InputSelectActiveDynamic" value="{!v.account.Active__c}" required="true" />
</div>
<lightning:button label="Create Account"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.create}"/>
</form>
</fieldset>
</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
*******************************************NewAccountCreationController.js******************************
({
create : function(component, event, helper) {
helper.createaccount(component,event);
},
})
************************************NewAccountCreationHelper.js*************************************
({
createaccount : function(component,event) {
var account = component.get("v.account");
var action = component.get("c.createRecord");
action.setParams({
acc : account
});
action.setCallback(this,function(a){
var state = a.getState();
if(state == "SUCCESS"){
var newAccount = {'sobjectType': 'Account',
'Name': '',
'Phone': '',
'Type': '',
'Active__c': ''
};
component.set("v.account",newAccount);
alert('Record is Created Successfully');
} else if(state == "ERROR"){
alert('Error in calling server side action');
}
});
$A.enqueueAction(action);
},
})
***************************************Apex Contrller - AccountLightningController.aspx***********************************
public class AccountLightningController {
@AuraEnabled
public static List<Account> getaccountlist()
{
return [select Id,Name,AccountNumber,Phone,Type,Active__c,(select Id,Name,Email,Phone,Title from Contacts) from Account order by createddate desc];
}
@AuraEnabled
public static void createRecord (Account acc)
{
insert acc;
}
}
*******************************************************************************************************************