Creating multiple records without Apex using Lightning Web Component in Salesforce

Creating multiple records without Apex using Lightning Web Component in Salesforce

Sample Code:

Lightning Web Component:

HTML:

<template>
    <lightning-card title="LdsCreateRecord" icon-name="standard:record">
       <div class="slds-m-around_medium">
            <lightning-input label="Account Name" onchange={handleNameChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-input label="Contact First Name" onchange={handleFirstNameChange} class="slds-m-bottom_x-small"></lightning-input>
            <lightning-input label="Contact Last Name" onchange={handleLastNameChange} class="slds-m-bottom_x-small"></lightning-input>
           <lightning-button label="Create Account and Contact" variant="brand" onclick={createRecords}></lightning-button>
       </div>
    </lightning-card>
</template> 

JavaScript:

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import CONTACT_ACCOUNT_Id_FIELD from '@salesforce/schema/Contact.AccountId';
import CONTACT_FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import CONTACT_LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';

export default class SampleLWC extends LightningElement {

    accountName = '';
    contactFirstName = '';
    contactLastName = '';

    handleNameChange( event ) {

        this.accountName = event.target.value;
        console.log( 'accountName is', this.accountName );

    }

    handleFirstNameChange( event ) {

        this.contactFirstName = event.target.value;
        console.log( 'contactFirstName is', this.contactFirstName );

    }

    handleLastNameChange( event ) {

        this.contactLastName = event.target.value;
        console.log( 'contactLastName is', this.contactLastName );

    }

    createRecords() {

        let fields = {};
        fields[ ACCOUNT_NAME_FIELD.fieldApiName ] = this.accountName;
        console.log( 'accountFields is', JSON.stringify( fields ) );
        const recordAccountInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord( recordAccountInput )
        .then( account => {
            fields = {};
            fields[ CONTACT_ACCOUNT_Id_FIELD.fieldApiName ] = account.id;
            fields[ CONTACT_FIRST_NAME_FIELD.fieldApiName ] = this.contactFirstName;
            fields[ CONTACT_LAST_NAME_FIELD.fieldApiName ] = this.contactLastName;
            console.log( 'Contact Fields are', JSON.stringify( fields ) );
            const recordContactInput = { apiName: CONTACT_OBJECT.objectApiName, fields };
            createRecord( recordContactInput )
            .then( contact => {
                console.log( 'Contact Id is', contact.id );
                this.dispatchEvent(
                    new ShowToastEvent( {
                        title: 'Success',
                        message: 'Account and Contact records created successfully!',
                        variant: 'success',
                    } ),
                );
            })
            .catch( error => {
                console.log( 'Error while creating Contact', JSON.stringify( error ) );
                this.dispatchEvent(
                    new ShowToastEvent( {
                        title: 'Error creating Contact record',
                        message: error.body.message,
                        variant: 'error',
                    } ),
                );
            } );
        })
        .catch( error => {
            console.log( 'Error while creating Account', JSON.stringify( error ) );
            this.dispatchEvent(
                new ShowToastEvent( {
                    title: 'Error creating Account record',
                    message: Object.keys( error ).length === 0 ? 'Some error occured while creating Account Record' : error.body.message,
                    variant: 'error',
                } ),
            );
        } );

    }

}

JS-meta.xml:

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

Output:

Leave a Reply