How to Create Account With Contact In LWC – Lightning Web Component

[vijayk3327]

In this post we are going to learn about How to Create Account With Contact In LWC – Lightning Web Component Salesforce.

→ Get source code live demo link:-

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

` `

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

` import { LightningElement, track } from 'lwc'; import { createRecord } from 'lightning/uiRecordApi';

import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import accObj from '@salesforce/schema/Account'; import accFld from '@salesforce/schema/Contact.AccountId'; import nameFld from '@salesforce/schema/Account.Name'; import conObj from '@salesforce/schema/Contact'; import conNameFld from '@salesforce/schema/Contact.LastName';

export default class CreateConRelAcc extends LightningElement {

@track accountName;
@track accountPhone;
@track accountId; 
@track contactId; 

handleNameChange(event){   
    if(event.target.name == 'accountName'){
        this.accountName = event.target.value;
    }  

}

saveAction() {
    const fields = {};
    fields[nameFld.fieldApiName] = this.accountName;
    const accRecordInput = { apiName: accObj.objectApiName, fields};

    createRecord(accRecordInput)
        .then(account => {
            this.accountId = account.id;

            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Account created',
                    variant: 'success',
                }),
            );

            const fields_Contact = {};
            fields_Contact[conNameFld.fieldApiName] = this.accountName + "'w3web contact";
            fields_Contact[accFld.fieldApiName] = this.accountId; 
            const recordInput_Contact = { apiName: conObj.objectApiName,
                                          fields : fields_Contact};

              createRecord(recordInput_Contact)
                .then(contact => {
                    this.contactId = contact.id;
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Contact created',
                            variant: 'success',
                        }),
                    );

                   this.accountName = ''; 
                })

        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: error.body.message,
                    variant: 'error',
                }),
            );
        });
}

}`

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

` <?xml version="1.0" encoding="UTF-8"?>

55.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ` **[→ Get source code live demo link:-](https://www.w3web.net/create-account-with-contact-in-lwc/)**