Editing row, Saving row and Removing rows Dynamically in Lightning component Salesforce

[vijayk3327]

In this post we are going to learn about that how to edit row, saving row or removing row dynamically in Salesforce lightning component.

In this example we will customize the same component and achieve to the editing row, saving row and removing rows functionality of dynamically on Custom sObject by help of wrapper apex class and JavaScript Controller in lightning component.

→ Get source code live demo link:-

Step 1:- Create Lightning Component : wrapperClassCustomObjCmp.cmp

` <aura:component controller="wrapperCustomObjCtrCmp" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >

<aura:attribute name="wrapListItems" type="NewStudent__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recSelectId" type="String" default=""/>

<div class="slds slds-p-horizontal--medium">
    <table class="slds-table slds-table--bordered slds-table--col-bordered" style="border-collapse:collapse;">
        <thead> 
            <tr>
                <th>Student Name</th>
                <th>Address</th>
                <th>Email</th>                     
                <th></th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.wrapListItems}" var="wrapVar" indexVar="index">
                <tr id="{!wrapVar.recStudentId}">
                    <aura:if isTrue="{!wrapVar.editMode}"> 
                        <td><ui:inputText aura:id="studentName"  value="{!wrapVar.studentName}"/></td>
                        <aura:set attribute="else">
                            <td>{!wrapVar.studentName}</td>
                        </aura:set>
                    </aura:if>
                    
                    <aura:if isTrue="{!wrapVar.editMode}"> 
                        <td><ui:inputTextArea aura:id="addressId" value="{!wrapVar.studentAddress}" rows="2"/></td>
                        <aura:set attribute="else">
                            <td>{!wrapVar.studentAddress}</td>
                        </aura:set>
                    </aura:if>
                    
                     <aura:if isTrue="{!wrapVar.editMode}"> 
                        <td><ui:inputEmail aura:id="emailId" value="{!wrapVar.studentEmail}"/></td>
                        <aura:set attribute="else">
                            <td>{!wrapVar.studentEmail}</td>
                        </aura:set>
                    </aura:if>
                    
                    <aura:if isTrue="{!wrapVar.editMode}">  
                        <td>                                
                            <a href="javascript:void(0);"><span class="saveSpan slds-m-left--small" title="Save" onclick="{!c.saveEditedTalent}" 
                                                                data-sfid="{!wrapVar.recStudentId}"
                                                                id="{!wrapVar.recStudentId}"
                                                                data-index="{!index}"></span></a>
                            
                            <a class="slds-text-color--error" href="javascript:void(0);"><span style="font-size:18px; font-weight:bold;" class="slds-m-left--small" title="Cancel" onclick="{!c.cancelEdit}" 
                                                                data-sfid=""
                                                                data-index="{!index}">X</span></a>
                            
                        </td>
                        <aura:set attribute="else">
                            <td> 
                                <a href="javascript:void(0);"><span class="editSpan slds-m-left--small" title="Edit" onclick="{!c.editTalent}" 
                                                                    data-sfid="{!wrapVar.recStudentId}"
                                                                    id="{!wrapVar.recStudentId}"
                                                                    data-index="{!index}"></span></a>
                                
                                <a href="javascript:void(0);"><span class="delSpan slds-m-left--small" title="Delete" onclick="{!c.deleteRowId}" 
                                                                    data-sfid="{!wrapVar.recStudentId}"
                                                                    data-index="{!index}"></span></a>
                                
                            </td>  
                        </aura:set>
                    </aura:if>
                    
                </tr>
            </aura:iteration>
        </tbody>
    </table>

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

</div>

</aura:component>`

Step 2:- Create Lightning Component : wrapperClassCustomObjCmpConroller.js

` ({
doInit : function(component, event, helper) {

  var action = component.get("c.appCustomWrapListMthd");
    action.setCallback(this, function(response){
        var state = response.getState();            
        if(state=='SUCCESS'){
            var result = response.getReturnValue();              
            component.set('v.wrapListItems',result);
        }
    });
    $A.enqueueAction(action);
},

editTalent : function( component, event, helper ) {
    var index = event.target.dataset.index;
    var thisObjId = event.target.dataset.sfid;
     var thisId = event.target.id;
    var wrapListItems = component.get( "v.wrapListItems" );        
    component.set('v.recSelectId',thisId);
    for ( var i = 0; i < wrapListItems.length; i++ ) {
        if(wrapListItems[i].editMode == true){
            var eventToast = $A.get("e.force:showToast");
            eventToast.setParams({
                "title":'Error',
                "type":'error',
                "message":'You can edit only one record at a time.'
            });
            eventToast.fire();
            return false;
        }
        wrapListItems[i].editMode = false;
    }
    wrapListItems[index].editMode = true;
    component.set( "v.wrapListItems", wrapListItems );        
},

cancelEdit : function(component, event, helper) {        
    var index = event.target.dataset.index;
    var wrapListItems = component.get( "v.wrapListItems" );
    wrapListItems[index].editMode = false;
    component.set( "v.wrapListItems", wrapListItems );         
     helper.refreshView(component);
},

saveEditedTalent:function(component, event, helper){
    var action = component.get("c.saveEdited");
    var studentVal = component.find('studentName').get('v.value');
    var addressId = component.find('addressId').get('v.value');
    var emailId = component.find('emailId').get('v.value');

    var recIdName = component.get('v.recSelectId');        
    action.setParams({"editName":studentVal, "editAddress":addressId, "editEmail":emailId, "recId":recIdName});
    action.setCallback(this, function(response){
        var state = response.getState();
        
        if(state == "SUCCESS"){
            var result = response.getReturnValue();
            var index = event.target.dataset.index;
             helper.refreshView(component);
            component.set('v.recSelectId',null);
            var eventToast = $A.get("e.force:showToast");
            eventToast.setParams({
                "title":'Success',
                "type":'success',
                "message":'Record updated successfully.'
               });
             eventToast.fire();                 
        }
    });
    $A.enqueueAction(action);
  
},

deleteRowId:function(component,event,helper){
    var sfid = event.target.dataset.sfid;        
    var action =component.get('c.delectRecId');       
    action.setParams({'delRecId':sfid});
    action.setCallback(this, function(response){
        var state = response.getState();
        if(state == 'SUCCESS'){
            var result = response.getReturnValue();                
            var wrapListItems = component.get( "v.wrapListItems" );
            component.set( "v.wrapListItems", wrapListItems );
            helper.refreshView(component);
            //alert('record deleted successfully');                
            var eventToast = $A.get("e.force:showToast");
            eventToast.setParams({
                "title":'Success',
                "type":'success',
                "message":'Record deleted successfully.'
               });
             eventToast.fire();
        }
    });
    $A.enqueueAction(action);
},   

})`

Step 3:- Create Lightning Component : wrapperClassCustomObjCmpHelper.js

` ({
refreshView : function(component, event, helper) {
var action = component.get("c.appCustomWrapListMthd");

    action.setCallback(this, function(response){
        var state = response.getState();            
        if(state=='SUCCESS'){
            var result = response.getReturnValue();               
            component.set('v.wrapListItems',result);
        }
    });
    $A.enqueueAction(action);
}

})`

Step 4:- Create Lightning Component : wrapperClassCustomObjCmp.css

` .THIS {
}
.THIS .slds-table thead tr th{background-color:#eee;}
.THIS .slds-table thead tr th, .THIS .slds-table tbody tr td {border:1px #dddbda solid; border-collapse: collapse; white-space: normal;}

.THIS .editSpan:before{content:''; width:17px; height:17px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/edit_120.png) no-repeat left top; background-size:cover; cursor: pointer;}
.THIS .saveSpan:before{content:''; width:17px; height:11px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/SaveToCloud.png) no-repeat left top; background-size:cover; cursor: pointer;}
.THIS .delSpan:before{content:''; width:17px; height:17px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/delete.png) no-repeat left top; background-size:cover; cursor: pointer;}
.THIS .cancelSpan:before{content:''; width:17px; height:17px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/closeIcon.png) no-repeat left top; background-size:cover; cursor: pointer;}
.THIS .createRecord:before{content:''; width:15px; height:17px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/createRecordIcon.png) no-repeat left top; background-size:cover; cursor: pointer;}`

Step 5:- Create Lightning Application : wrapperCustomObjCtrCmp.apxc
` public class wrapperCustomObjCtrCmp {

public class wrapperCustomClass{
    @AuraEnabled
    public string studentName;
    @AuraEnabled
    public string studentEmail;
    @AuraEnabled
    public string studentAddress;
    @AuraEnabled
    public Id recStudentId;        
    @AuraEnabled
    public Boolean editMode;
    
    public wrapperCustomClass(string studentName, string studentEmail, string studentAddress, Id recStudentId,Boolean editMode){
     this.studentName = studentName;
     this.studentEmail = studentEmail;
     this.studentAddress = studentAddress;  
     this.recStudentId = recStudentId;           
     this.editMode=editMode;
    }
    
}


@AuraEnabled
public static List<wrapperCustomClass> appCustomWrapListMthd(){
   List<NewStudent__c> newStudent = new List<NewStudent__c>();       
   List<wrapperCustomClass> custWrapObj = new  List<wrapperCustomClass>();            
   List<NewStudent__c> newStudentView =[Select Id, Name, Email__c, Address__c From NewStudent__c];
        
    for(NewStudent__c studentObj:newStudentView){            
       custWrapObj.add(new wrapperCustomClass(studentObj.Name, studentObj.Email__c,studentObj.Address__c, studentObj.Id, false));   
    }
    return custWrapObj;
}


@AuraEnabled
public static List<NewStudent__c> delectRecId(Id delRecId){
    delete [Select Id From NewStudent__c Where Id=:delRecId];        
    List<NewStudent__c> listStudent = [Select Id, Name, Email__c, Address__c From NewStudent__c];        
    return listStudent;       
}    

@AuraEnabled
public static NewStudent__c saveEdited(string editName, string editAddress, string editEmail, Id recId){
    system.debug('==recId=='+recId);
    
    NewStudent__c newStudentView =[Select Id, Name, Email__c, Address__c From NewStudent__c Where Id=:recId];
    newStudentView.Name = editName;
    newStudentView.Address__c= editAddress;
    newStudentView.Email__c= editEmail;
    update newStudentView;
    return newStudentView;        
}

}`

→ Get source code live demo link:-