Insert Record of Object using Apex Class in LWC

In this article we are going to learn about, How we can insert a record of the object(Contact, Account, Opportunity). We will use apex class to insert the record.

insertObject.html

<template>
    <lightning-card title="Create Contact Record">
        <template if:true={conRecord}>
            <div class="slds-m-around--xx-large">
                <div class="container-fluid">
                    <div class="form-group">
                        <lightning-input label="First Name" name="conFirstName" required="required" type="text"
                            value={conRecord.FirstName} onchange={handleFirstNameChange}></lightning-input>
                    </div>
                    <div class="form-group">
                        <lightning-input label="Last Name" name="conLastName" required="required" type="text"
                            value={conRecord.LastName} onchange={handleLastNameChange}></lightning-input>
                    </div>
                    <div class="form-group">
                        <lightning-input label="Enter Phone Number" name="conPhone" type="number"
                            value={conRecord.Phone} onchange={handlePhoneChange}></lightning-input>
                    </div>
                    <div class="form-group">
                        <lightning-input label="Enter Email" name="conEmail" type="text" value={conRecord.Email}
                            onchange={handleEmailChange}></lightning-input>
                    </div>
                </div>
                <br />
                <lightning-button label="Submit" onclick={createRec} variant="brand"></lightning-button>
            </div>
        </template>
    </lightning-card>
</template>

insertObject.js

import {  LightningElement, track } from 'lwc';
import {  ShowToastEvent } from 'lightning/platformShowToastEvent';
import insertCon from '@salesforce/apex/insertObject.insertCon';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
export default class insertObject extends LightningElement {
    @track conRecord = CONTACT_OBJECT;

    handleFirstNameChange(event) {
        this.conRecord.FirstName = event.target.value;
        window.console.log('First Name ==> ' + this.conRecord.FirstName);
    }

    handleLastNameChange(event) {
        this.conRecord.LastName = event.target.value;
        window.console.log('Last Name ==> ' + this.conRecord.LastName);
    }

    handlePhoneChange(event) {
        this.conRecord.Phone = event.target.value;
        window.console.log('Phone ==> ' + this.conRecord.Phone);
    }

    handleEmailChange(event) {
        this.conRecord.Email = event.target.value;
        window.console.log('Email ==> ' + this.conRecord.Email);
    }

    createRec() {
        window.console.log('In createRec ===> ');
        insertCon({
                con: this.conRecord
            })
            .then(result => {
                // Clear the user enter values
                this.conRecord = {};
                window.console.log('result ===> ' + result);
                // Show success messsage
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Success!!',
                    message: 'Contact Created Successfully!!',
                    variant: 'success'
                }), );
            })
            .catch(error => {
                this.error = error.message;
            });
    }
}
Note:- Toast will work on the standard page only.

insertObject.cls

public with sharing class insertObject {
    @AuraEnabled
    public static void insertCon(Contact con){ 
        try{  
            insert con; 
        }catch(Exception e){
            System.debug('--->'+e);
        }
         System.debug('Con '+con); 
    }   
}

I hope the above code work for you. We will add more articles soon. So, don’t forget to subscribe our website. You can add in our WhatsApp group.

Please provide us your valuable feedback. We will appreciate your efforts.