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

Hey guys, today 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)

Files we used in this post example:-

insertAccountLwc.htmlLightning Web Component HTMLIt is used to write HTML element for build user interface.

insertAccountLwc.js

Lightning Web Component JavaScriptIt is hold function and business logic.

insertAccountLwc.js-meta.xml

XML MetaIt is used forwhere this lightning web component should be exposed.lwcApexController.clsApex Controller FileIt is used for insert input value into database server.

Live Demo | To know more, use this link

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

SFDX:Lightning Web Component >> New >> insertAccountLwc.html

insertAccountLwc.html [Lightning Web Component 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

SFDX:Lightning Web Component >> New >> insertAccountLwc.js

insertAccountLwc.js [JavaScript Controller]

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 : lwcApexController.cls

SFDX:Create Apex Class >> New >> lwcApexController.cls

lwcApexController.cls [Apex Class]

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());
}
}
}

Originally published at https://www.w3web.net on September 13, 2020.