function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aakanksha SinghAakanksha Singh 

Rerender the list on submitting a new record in lightning component

Hi all,
How can i rerender a list on adding a record through popup which is a component itself?
Thanks in advance.
Best Answer chosen by Aakanksha Singh
sfdcMonkey.comsfdcMonkey.com
hi, 
i review your code and its so simple try this code -:

in your List component  add this line after aura handler -: 
<aura:method name="updateAcc" action="{!c.getAccount}" description="method for rendered list after add new account "/>

and update your  List componentController.js with blow code ( blod text)


 HidePopUp:function(cmp,event){
        var cmpTarget = cmp.find('Modalbox');
        var cmpBack = cmp.find('MB-Back');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
        component.updateAcc(); // call <aura:method> for reload the account list on page        
    },    


now when you add new account from pop up the list of account in list component will be Rerender 
Thanks
if it work let me inform and mark it solve :)
 
 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Aakanksha Singh
can you share your component and both controller code ?
Aakanksha SinghAakanksha Singh
Hi,
I've created a list view of sobject Account in a component, in which there is a button which opens a pop-up which is a component containing form, in which there is a submit button, on click a new record is created and popup is closed at once, now i have to rerender the list also, in which the new record inserted should be displayed. For fetching and inserting the record i've followed the same method as in expense tracker, as in trailhead module/ lightning component developer's guide.
Thanks 
sfdcMonkey.comsfdcMonkey.com

hi Aakanksha Singh

you can achive this by  <aura:method> when you add new record by popup modal after add record call <aura:method>  by js controller this method call doInit (or other js controller function) i write a sample example for you, as your requirement.

component (with bootstrap)

<aura:component controller="acclistController" implements="force:appHostable" access="global">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <ltng:require styles="{! $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/css/bootstrap.min.css'}" 
            scripts="{!join(',', 
                     $Resource.jquery224 + '/bootstrapejq/jquery-2.2.4.min.js', 
                     $Resource.Bootstrap337update + '/Bootstrap337update~/bootstrap-3.3.7-dist/js/bootstrap.min.js')
                    }"/> 
    <aura:method name="updateAcc" action="{! c.doInit}" description="method for rendered list after add new account "/>
    <!-- aura handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="accountList" type="account[]"/>
    <aura:attribute name="newAccount" type="account" default="{
                                                              'sobjectType':'account',
                                                              'Name':''
                                                              }"/>
 
  <aura:iteration items="{! v.accountList}" var="a">
       <li>{! a.Name}</li> 
  </aura:iteration>

    
  <!--pop up aria start for new account add--> 
   <button type="button" title="add new contact" class="btn btn-circle-lg btn-success" style="margin-top:12px;" data-toggle="modal" data-target="#myModal">open pop up</button>  
    
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
  
     <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add New Contact.</h4>
        </div>
        <div class="modal-body">
            <form role="form">
             <div class="form-group">
                <label for="Fname">Account Name</label>
                <ui:inputText class="form-control" value="{! v.newAccount.Name}"/>
            </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal" onclick="{! c.addNewAccountHandler}">Add</button> 
        </div>  
      </div>
    </div>
  </div>
    
</aura:component>
jscontroller 
({
	doInit : function(component, event, helper) {
        //get account list from salesforce
     var action = component.get("c.fetchaccount");
         action.setCallback(this, function(response) {
         var state = response.getState();
         if (component.isValid() && state === "SUCCESS") {

    component.set("v.accountList", response.getReturnValue());
             
   }

  });
  $A.enqueueAction(action);  	
	}, 
    
    addNewAccountHandler : function(component, event, helper) {
        
         var action = component.get("c.saveAccount");
         var getCurrentAccount = component.get("v.newAccount");
         action.setParams({ "oAcc":  getCurrentAccount});
         action.setCallback(this, function(response) {
         var state = response.getState();  
         if (component.isValid() && state === "SUCCESS") {
             }
  });
  $A.enqueueAction(action);  
   component.updateAcc(); // call <aura:method> for reload the account list on page   
        
    }

})

apex class (acclistController) 
public with sharing class acclistController {
    
   @AuraEnabled 
    public static List<account> fetchaccount(){
        
       list<account> lst =  [select id,name from account] ;  
        return lst;
    }
   
   @AuraEnabled 
    public static void saveAccount(account oAcc){
        
        insert oAcc; 
        
    } 
    
  }

after you add new account the list is Rerender by <aura:method> call. focuse on bold text

Thanks 
If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer. :-)
 
sfdcMonkey.comsfdcMonkey.com
if you have any problem with it mail me on sfdcjaipur@gmail.com :)
Aakanksha SinghAakanksha Singh
Hi,
Actually popup is another compnent i.e <c:popup/> and insertion is done in that component and the account list itself acomponent in which pop up is present.
Thanks for helping me
sfdcMonkey.comsfdcMonkey.com
can you send me your code so i tell you a proper solution ? :)
Aakanksha SinghAakanksha Singh
List component-
<aura:component controller="AccListController">
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="AccountEvent" action="{!c.HidePopUp}" event="c:Event"/>
    <aura:handler name="init" value="{!this}" action="{!c.getAccount}" />
    <ui:button class=" slds-button slds-button--neutral slds-float--right" press="{!c.ShowPopUp}">New Vehicle</ui:button>
    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
        <thead>
            <tr class="slds-text-heading--label ">
                <th class="" scope="col">Account Name</th>
                <th class="slds-is-sortable" scope="col">Account Number</th>
                <th class="slds-is-sortable" scope="col">Account Source</th>
            </tr>  
        </thead>
        <tbody>
             <aura:iteration items="{!v.accounts}" var="account"><!--Dynamic Listing of Vehicles-->
                <tr class="slds-hint-parent">
                    <td class="" data-label="Account Name" >
                        <a href="{! '#/sObject/' + account.Id + '/view'}">{!account.Name}</a>
                    </td>
                    <td data-label="Account Number" style="padding-left:0;"><ui:outputNumber value="{!account.accountNumber}" /></td>
                    <td data-label="Account Source" style="padding-left:0;">{!account.account Source}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    <div role="dialog" tabindex="-1" aura:id="Modalbox" aria-labelledby="header43" class="slds-modal ">
            <c:PopUp />
      </div>
      <div class="slds-backdrop" aura:id="MB-Back"></div>
</aura:component>
Controller-
({
    getAccount:function(component, event, helper) {
        var action=component.get("c.getAccList");//get data from controller
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());//set data in the page variable
        });
        $A.enqueueAction(action);
    },
    ShowPopUp:function(cmp,event){
        var cmpTarget = cmp.find('Modalbox');
           var cmpBack = cmp.find('MB-Back');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
    },
    HidePopUp:function(cmp,event){
        var cmpTarget = cmp.find('Modalbox');
           var cmpBack = cmp.find('MB-Back');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');        
    },   
})
PopUp component-
<aura:component implements="force:appHostable" controller="AccListController">
    <ltng:require styles="{!$Resource.SLDS +
             '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <aura:registerEvent name="AccountEvent" type="c:Event"/>
   <aura:attribute name="account" type="Account"/>
  <aura:attribute name="newAccount" type="Account"
         default="{ 'sobjectType': 'Account',
                         'Name': '',
                         'AccountNumber': '',
                         'AccountSource': ''
                       }"/>
    <div class ="wk_static">
        <div class="slds-modal__container ">
                <div class="slds-modal__header">  
                    <div class="slds-grid">
                        <div class="slds-col slds-has-flexi-truncate">
                            <div class="slds-media slds-media--center slds-no-space slds-grow">
                                <div class="slds-media__body">
                                    <p class="slds-text-heading--label slds-truncate">Account</p>
                                    <h1 class="slds-page-header__title slds-m-right--small slds-truncate slds-align-middle" title="New Account">New Account</h1>
                                </div>                        
                            </div>
                        </div>                             
                    </div>
                </div>
                <div class="modal-body scrollable slds-modal__content slds-p-around--medium">
                    <div class= "slds-form--stacked">
                        <div class="slds-form-element">
                            <div class="slds-form-element slds-is-required">
                                <div class="slds-form-element__control">
                                    <ui:inputText aura:id="Name" label="Account Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newAccount.Name}" required="true"/>
                                </div>
                            </div>
                        </div>
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <ui:inputnumber aura:id="AccNum" label="Account Number" class="slds-input" labelClass="slds-form-element__label" value="{!v.newAccount.accountNumber}" required="true"/>           
                            </div>
                        </div>                       
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <ui:inputText aura:id="Accsource" label="Account Source" class="slds-input" labelClass="slds-form-element__label" value="{!v.newAccount.accountSource}" required="true"/>           
                            </div>
                        </div>                       
                <div class="slds-modal__footer">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <ui:button class="slds-button slds-button--neutral slds-not-selected" press="{!c.createAccount}">Submit</ui:button>
                            <ui:button aura:id="button1" class="slds-button slds-buttonneutral slds-not-selected" press="{!c.HideComponent}">Cancel</ui:button>
                        </div>
                    </div>
                </div>
            </div>
    </div>       
</aura:component>
Controller-
({
    createAccount: function(component, event, helper) {
        var nameField = component.find("Name");      
        var nm = nameField.get("v.value");
        if(nm==''){
            nameField.set("v.errors", [{message:"Account Name is a required Field."}]);
        }else{
            nameField.set("v.errors", null);
            
            var newAccount = component.get("v.newAccount");
            helper.createAccount(component, newAccount);
            var compEvent = component.getEvent("AccountEvent");
            compEvent.fire();
        }
    },
    HideComponent : function(component,event,helper){
        var compEvent = component.getEvent("AccountEvent");
        compEvent.fire();      
    }
    
})
Helper-
({
    createAccount: function(component, account) {
        this.upsertAccount(component, account, function(a) {
            var accounts = component.get("v.account");
            accounts.push(a.getReturnValue());
            component.set("v.account", accounts);
          });
    },
    upsertAccount : function(component, account, callback) {
        var action = component.get("c.saveAccount");
        action.setParams({
            "account": account
        });
        if (callback) {
          action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    },
    
})
Apex Controller is same as yours.
Thanx
sfdcMonkey.comsfdcMonkey.com
hi, 
i review your code and its so simple try this code -:

in your List component  add this line after aura handler -: 
<aura:method name="updateAcc" action="{!c.getAccount}" description="method for rendered list after add new account "/>

and update your  List componentController.js with blow code ( blod text)


 HidePopUp:function(cmp,event){
        var cmpTarget = cmp.find('Modalbox');
        var cmpBack = cmp.find('MB-Back');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
        component.updateAcc(); // call <aura:method> for reload the account list on page        
    },    


now when you add new account from pop up the list of account in list component will be Rerender 
Thanks
if it work let me inform and mark it solve :)
 
 
This was selected as the best answer
Aakanksha SinghAakanksha Singh
Thanks bt its not working.
sfdcMonkey.comsfdcMonkey.com
what error you getting?
Aakanksha SinghAakanksha Singh
None, Just nthing is happening.
 
Aakanksha SinghAakanksha Singh
nope
sfdcMonkey.comsfdcMonkey.com
ooopss so some other miskte on your code ,please debug your code with console.log and find the error or if you dont understand what is gone wrong send your all code (application,component,event) on my mail account sfdcjaipur@gmail.com i handler and find error :)
Aakanksha SinghAakanksha Singh
Thanks for your help, i sorted out my errors.. :)