Create a Contact Record With Re-Usable Dynamic Custom Lookup Field in Lightning Web Component – LWC

[vijayk3327]

Hey guys, Today in this post we are going to learn about How to Create a Contact Record With Re-Usable Dynamic Custom Lookup Field in Lightning Web Component – LWC.

→ Get source code live demo link:-

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

`

        <c-lwc-account-custom-lookup onselected={myLookupHandle}></c-lwc-account-custom-lookup><br/>
        <lightning-button label="Submit" variant="brand" onclick={createLookupContactAction} class="slds-m-bottom_x-small slds-p-horizontal_small slds-form-element"></lightning-button>                     
    </div>

`

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

` import { LightningElement, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import contactFirstName from '@salesforce/schema/Contact.FirstName';
import contactLastName from '@salesforce/schema/Contact.LastName';
import contactPhone from '@salesforce/schema/Contact.Phone';
import contactEmail from '@salesforce/schema/Contact.Email';
import accountFieldId from '@salesforce/schema/Contact.AccountId';

export default class LwcCreateContactCustomLookup extends NavigationMixin(LightningElement) {
@track selectedAccountId;
@track contactId;
firstname = '';
lastname = '';
phoneNo = '';
emailId = '';
contactHandleChange(event) {
console.log(event.target.label);
console.log(event.target.value);
if(event.target.label=='First Name'){
this.firstname = event.target.value;
}
if(event.target.label=='Last Name'){
this.lastname = event.target.value;
}

    if(event.target.label=='Phone'){
        this.phoneNo = event.target.value;
    }

    if(event.target.label=='Email'){
        this.emailId = event.target.value;
    }
               
}

createLookupContactAction(){
    console.log(this.selectedAccountId);
    const fields = {};
    fields[contactFirstName.fieldApiName] = this.firstname;
    fields[contactLastName.fieldApiName] = this.lastname;
    fields[contactPhone.fieldApiName] = this.phoneNo;
    fields[contactEmail.fieldApiName] = this.emailId;
    
    fields[accountFieldId.fieldApiName] = this.selectedAccountId;
    const recordInput = { apiName: CONTACT_OBJECT.objectApiName, fields };
    createRecord(recordInput)
        .then(contactobj=> {
            this.contactId = contactobj.id;
            this.fields={};
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Contact created successfully..!',
                    variant: 'success',
                }),
            );
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: contactobj.id,
                    objectApiName: 'Contact',
                    actionName: 'view'
                },
            });


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

}`

Step 3:- Create Lightning Web Component : lwcCreateContactCustomLookup.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>

→ Get source code live demo link:-