How to Insert a Record of Account Object Using Apex Class in Salesforce Lightning Web Component-LWC

[vijayk3327]

In this post we are going to learn about How to Insert a Record of Account Object Using Apex Class in Salesforce Lightning Web Component (LWC)

→ Get source code live demo link:-

Check Live Demo Click Here..

Step 1:- Create Lightning Web Component : insertAccountLwc.html

<template>
 <lightning-card>
   <div slot="title">
     <h3> 
         <lightning-icon icon-name="standard:account" size="small"></lightning-icon> Create an Account Using Apex Controller in LWC           
      </h3>
   </div>    

  <p class="slds-p-horizontal_small">
    <lightning-input type="text" label="Name" value={getAccountRecord.Name} onchange={nameInpChange}></lightning-input>
   </p>

   <p class="slds-p-horizontal_small">
    <lightning-input type="text" label="Phone" value={getAccountRecord.Phone} onchange={phoneInpChange}></lightning-input>
   </p>

   <p class="slds-p-horizontal_small">
     <lightning-input type="text" label="Type" value={getAccountRecord.Type} onchange={typeInpChange}></lightning-input>
    </p>

    <p class="slds-p-horizontal_small">
     <lightning-input type="text" label="Website" value={getAccountRecord.Website} onchange={websiteInpChange}></lightning-input>
    </p>
      

    <p class="slds-p-horizontal_small">
     <lightning-input type="text" label="Account Site" value={getAccountRecord.Site} onchange={accSiteChange}></lightning-input>       
    </p> 
    
  <div slot="footer">
    <lightning-button label="Submit" onclick={saveAccountAction} variant="brand"></lightning-button>
  </div>



</lightning-card>
</template>

Step 2:- Create Lightning Web Component : insertAccountLwc.js

import { LightningElement,track } from 'lwc';
import insertAccountMethod from '@salesforce/apex/lwcApexController.insertAccountMethod';
import accName from '@salesforce/schema/Account.Name';
import accPhone from '@salesforce/schema/Account.Phone';
import accType from '@salesforce/schema/Account.Type';
import accWebsite from '@salesforce/schema/Account.Website';
import accSite from '@salesforce/schema/Account.Site';

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class InsertAccountLwc extends LightningElement {
   @track accountid;
   @track error;    
   @track getAccountRecord={
       Name:accName,       
       Phone:accPhone,  
       Type:accType, 
       Website:accWebsite,         
       Site:accSite
             
   };   

  
   nameInpChange(event){
      this.getAccountRecord.Name = event.target.value;
      //window.console.log(this.getAccountRecord.Name);
    }

    phoneInpChange(event){
      this.getAccountRecord.Phone = event.target.value;
      //window.console.log(this.getAccountRecord.Phone);
   }
   
    typeInpChange(event){
       this.getAccountRecord.Type = event.target.value;
       //window.console.log(this.getAccountRecord.Type);
     }

     websiteInpChange(event){
       this.getAccountRecord.Website = event.target.value;
       //window.console.log(this.getAccountRecord.Type);
     }

     accSiteChange(event){
       this.getAccountRecord.Site = event.target.value;
       //window.console.log(this.getAccountRecord.Type);
     }
         
   
     saveAccountAction(){
       window.console.log('before save' + this.createAccount);
       insertAccountMethod({accountObj:this.getAccountRecord})
       .then(result=>{
         window.console.log(this.createAccount);
           this.getAccountRecord={};
           this.accountid=result.Id;
           window.console.log('after save' + this.accountid);
           
           const toastEvent = new ShowToastEvent({
             title:'Success!',
             message:'Account created successfully',
             variant:'success'
           });
           this.dispatchEvent(toastEvent);
       })
       .catch(error=>{
          this.error=error.message;
          window.console.log(this.error);
       });
     }
   
   
   }

Step 3:- Create Lightning Web Component : insertAccountLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 4:- Create Lightning Web Component : lwcApexController.cls

 public with sharing class lwcApexController {
   
   @AuraEnabled
   public static Account insertAccountMethod(Account accountObj){
       try {
           insert accountObj;
           return accountObj;
       } catch (Exception exp) {
           throw new AuraHandledException(exp.getMessage());
       }
   }
}

→ Get source code live demo link:-