How to you make Edit/Save records of Account on edit button click as custom functionality using apex class controller in lightning component Salesforce | How to update/edit Account records uses of apex class in lightning component Salesforce

Hey guys, today in this post we are going to learn about How to you make Edit/Save records of Account on edit button click as custom functionality in lightning component Salesforce.

To edit a record using lightning:recordForm, provide the record ID and object API name. When you provide a record ID, view mode is the default mode of this component, which displays fields with edit icons. If you click an edit icon, all fields in the form become editable. To know more details, Click Here →

Files we used to create Edit/Save Functionality in aura:component →

editRecordCmp.cmp	Lightning Component	It is used to create a edit/save records form in lightning component
editRecordCmpController.js	JavaScript Controller	It is hold Javascript Edit/Save functionality in lightning component.
editRecordCtrl.apxc	Apex Class Controller	It is used for get SOQL query to retrieve data from Apex Method
editRecordApp.app	Lightning Application	It is used to call the component and preview on browser.

Don’t forget to check out:- Write a trigger whenever Opportunity is deleted the corresponding Account and Contact should be deleted uses of Apex trigger in Salesforce. Click Here For More Information

Final Output →

👉 Download Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Lightning Component

Step 1:- Create Lightning Component : editRecordCmp.cmp

From Developer Console >> File >> New >> Lightning Component

editRecordCmp.cmp [Lightning Component File]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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

    <aura:attribute name="acclist" type="list"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="editData" type="boolean"/>

```
 
```

    <div class="slds slds-p-around_large">

        <h2 class="slds-text-heading_medium"><lightning:icon iconName="custom:custom86" size="small"/> <strong style="color:#270086; font-size:16px; margin-right:5px;"> How to Edit/Update Records in Lightning Component [<a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">View more articles →</a>]</strong></h2>

```
        <br/>
```

        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

```
            <thead> 
```
```
                <tr>
```
```
                    <td colspan="4">
```

                        <div style="display:block; text-align:center;">

                            <aura:if isTrue="{!!v.editData}">

                                <lightning:button label="Edit" variant="brand" onclick="{!c.dataEditAction}"/>

```
                            </aura:if>
```
```
 
```

                            <aura:if isTrue="{!v.editData}">

                                <lightning:button variant="brand" label="Save" onclick="{!c.dataSaveAction}"/>

                                <lightning:button variant="destructive" label="Cancel" onclick="{!c.dataCancelAction}"/>

```
                            </aura:if>
```
```
                        </div>
```
```
                    </td>
```
```
                </tr>
```
```
 
```
```
                <tr>
```

                    <th style="background:#ddd;">Name</th>

                    <th style="background:#ddd;">Phone</th>

                    <th style="background:#ddd;">Industry</th>

                    <th style="background:#ddd;">Type</th>

```
                </tr>
```
```
            </thead>
```
```
            <tbody>
```

                <aura:if isTrue="{!!v.editData}">

                    <aura:iteration items="{!v.acclist}" var="Items">

```
                        <tr>
```

                            <td>{!Items.Name}</td>

                            <td>{!Items.Phone}</td>

                            <td>{!Items.Industry}</td>

                            <td>{!Items.Type}</td>

```
                        </tr>
```
```
                    </aura:iteration>
```
```
                </aura:if>
```

                <aura:if isTrue="{!v.editData}">

                    <aura:iteration items="{!v.acclist}" var="Items">

```
                        <tr>
```
```
                            <td>
```

                                <lightning:input value="{!Items.Name}"/>

```
                            </td>
```
```
                            <td>
```

                                <lightning:input value="{!Items.Phone}"/>

```
                            </td>
```
```
                            <td>
```

                                <lightning:input value="{!Items.Industry}"/>

```
                            </td>
```
```
                            <td>
```

                                <lightning:input value="{!Items.Type}"/>

```
                            </td>
```
```
                        </tr>
```
```
                    </aura:iteration>
```
```
                </aura:if>
```
```
 
```
```
                <tr>
```
```
                    <td colspan="4">
```

                        <div style="display:block; text-align:center;">

                            <aura:if isTrue="{!!v.editData}">

                                <lightning:button label="Edit" variant="brand" onclick="{!c.dataEditAction}"/>

```
                            </aura:if>
```
```
 
```

                            <aura:if isTrue="{!v.editData}">

                                <lightning:button variant="brand" label="Save" onclick="{!c.dataSaveAction}"/>

                                <lightning:button variant="destructive" label="Cancel" onclick="{!c.dataCancelAction}"/>

```
                            </aura:if>
```
```
                        </div>
```
```
                    </td>
```
```
                </tr> 
```
```
            </tbody>  
```
```
 
```
```
        </table>
```
```
 
```
```
 
```
```
 
```

        <!--Start RelatedTopics Section-->

```
        <br/><br/>
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

    <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;"/><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;"/><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>
```
```
 
```
```
  
```
```
 
```
```
    </div>
```
```
</aura:component>
```

Create JavaScript Controller

Step 2:- Create Lightning Component : editRecordCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

editRecordCmpController.js [JavaScript Controller]

```
   ({
```
```
 
```
```
    //doInit function to fetch the data
```

	doInit : function(component, event, helper)

```
    {
```

        component.set("v.editData",false);

        var action=component.get("c.getAccountList");

        action.setCallback(this,function(response){

            var state=response.getState();

            if(state==='SUCCESS')            {

```
 
```

                var result=response.getReturnValue();

                component.set("v.acclist",result);

```
            }
```
```
            else
```
```
            {
```

                console.log('Some Error occurred during fetching the data');

```
            }
```
```
 
```
```
        });
```
```
        $A.enqueueAction(action);
```
```
 
```
```
 },
```
```
 
```

    //dataEditAction function to edit the data

```
 
```

    dataEditAction:function(component,event,helper)

```
    {
```

        component.set("v.editData",true);

```
    },
```
```
 
```
```
 
```

     //dataSaveAction function to Save the data

    dataSaveAction:function(component,event,helper)

```
    {
```
```
 
```

        component.set("v.editData",false);

        var action=component.get("c.updateAccRecords");

```
        action.setParams({
```

            accdata:component.get("v.acclist")

```
 
```
```
        });
```

          action.setCallback(this,function(response){

            var state=response.getState();

```
 
```
```
            if(state==='SUCCESS')
```
```
            {               
```

                var result=response.getReturnValue();

                component.set("v.acclist",result);

```
 
```

                var toastEvent = $A.get("e.force:showToast");

```
                toastEvent.setParams({
```

                    "title": "Success!",

```
                    "type":'success',
```

                    "message": "The record has been updated successfully."

```
                });
```
```
                toastEvent.fire();
```
```
 
```
```
            }
```
```
            else
```
```
            {
```

                console.log('Some Error occurred during fetching the data');

```
            }
```
```
 
```
```
        });
```
```
        $A.enqueueAction(action);
```
```
    },
```
```
 
```
```
 
```

    //dataCancelAction function to Cancel the data

    dataCancelAction:function(component,event,helper)

```
    {
```

        component.set("v.editData",false);

```
    }
```
```
 
```
```
})
```

Create Apex Class Controller

Step 3:- Create Apex Class : editRecordCtrl.apxc

From Developer Console >> File >> New >> Apex Class

editRecordCtrl.apxc [Apex Class Controller]

```
   public class editRecordCtrl {
```
```
 
```
```
    @AuraEnabled
```

      public static List<Account> getAccountList(){

          List<Account> accList = [SELECT Id, Name, Phone, Industry, TYPE FROM Account WHERE Industry !=NULL LIMIT 10];

```
          RETURN accList;
```
```
      }
```
```
 
```
```
    @AuraEnabled
```

    public static List<Account> updateAccRecords(List<Account> accdata)

```
    {
```
```
        try
```
```
        {
```
```
            UPDATE accdata;
```
```
        }
```
```
        catch(Exception e)
```
```
        {
```

            System.debug('unable to update the record due to '+e.getMessage());

```
        }
```
```
        RETURN accdata;
```
```
    }
```
```
}
```

Create Lightning Application

Step 4:- Create Lightning Application : editRecordApp.app

From Developer Console >> File >> New >> Lightning Application

editRecordApp.app [Component Application File]

       <aura:application extends="force:slds">

```
    <c:editRecordCmp/>
```
```
</aura:application>
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

How do you make a field editable in lightning component?

To specify editable fields, use lightning-input-field components inside lightning-record-edit-form component. See the Editing a Record section. To display record fields as read-only in lightning-record-edit-form , use lightning-output-field components to specify those fields.

Can we edit lightning components in production?

Lightning Components can be changed in Production, however it is not recommended because it would cause discrepancies between any and all Sandboxes that were created before the change on Production.

How do I edit a custom lightning component?

Custom Lightning components configured for Experience Builder sites behave just like standard template components. Drag the component to the page canvas. To edit its properties, select the component on the page canvas, and then enter changes in the floating component property editor.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to you make Edit/Save records of Account on edit button click as custom functionality using apex class controller in lightning component Salesforce | How to update/edit Account records uses of apex class in lightning component Salesforce

Files we used to create Edit/Save Functionality in aura:component →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create Lightning Component

editRecordCmp.cmp [Lightning Component File]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Create JavaScript Controller

editRecordCmpController.js [JavaScript Controller]

Create Apex Class Controller

editRecordCtrl.apxc [Apex Class Controller]

Create Lightning Application

editRecordApp.app [Component Application File]

How do you make a field editable in lightning component?

Can we edit lightning components in production?

How do I edit a custom lightning component?

Related Topics | You May Also Like

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

Vijay Kumar

Leave a Comment Cancel reply