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.
Files we used in this post example:-
lwcCreateContactCustomLookup.html | Lightning Web Component HTML | Template HTML file used to write HTML element for build user interface. |
lwcCreateContactCustomLookup.js |
Lightning Web Component JavaScript | It is hold First Name, Last Name, Phone , Email and Submit button click functionality. |
lwcCreateContactCustomLookup.js-meta.xml |
XML Meta File | It is used for where this lightning web component should be exposed. |
lwcAccountCustomLookup.html |
Lightning Web Component HTML | It is Templae HTML file and hold a Account Search Lookup Field. |
lwcAccountCustomLookup.js | Lightning Web Component JavaScript | It is hold Search function and fetch the account name value from database server. |
lwcAccountCustomLookup.js-meta.xml | XML Meta File | It is used for where this lightning web component should be exposed |
lwcApexController.cls | Apex Controller | It is used for Insert a Contact Record with Custom Lookup Field into database sserver |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : lwcCreateContactCustomLookup.html
SFDX:Lightning Web Component >> New >> lwcCreateContactCustomLookup.html
lwcCreateContactCustomLookup.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <lightning-card title="Create custom lookup on contact object" icon-name="standard:contact"> <div class="slds-p-horizontal_small"> <lightning-input label="First Name" value={firstname} onchange={contactHandleChange} class="slds-m-bottom_x-small slds-p-horizontal_small slds-form-element"></lightning-input> <lightning-input label="Last Name" value={lastname} onchange={contactHandleChange} class="slds-m-bottom_x-small slds-p-horizontal_small slds-form-element"></lightning-input> <lightning-input label="Phone" value={phone} onchange={contactHandleChange} class="slds-m-bottom_x-small slds-p-horizontal_small slds-form-element"></lightning-input> <lightning-input label="Email" value={email} onchange={contactHandleChange} class="slds-m-bottom_x-small slds-p-horizontal_small slds-form-element"></lightning-input> <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> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : lwcCreateContactCustomLookup.js
SFDX:Lightning Web Component >> New >> lwcCreateContactCustomLookup.js
lwcCreateContactCustomLookup.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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
SFDX:Lightning Web Component >> New >> lwcCreateContactCustomLookup.js-meta.xml
lwcCreateContactCustomLookup.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?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> |
Step 4:- Create Lightning Web Component : lwcAccountCustomLookup.html
SFDX:Lightning Web Component >> New >> lwcAccountCustomLookup.html
lwcAccountCustomLookup.html [Lightning Web Component HTML]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <lightning-card> <div class="slds-p-horizontal_small"> <div class="row"> <div class="slds-form-element"> <div class="slds-form-element__control"> <div class="slds-combobox_container"> <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox"> <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none"> <lightning-input type="search" id="combobox-id-16" value={accountName} onchange={searchHandleKeyChange} onkeydown={searchHandleClick} onclick={searchHandleClick} onblur={searchHandleClick} aria-activedescendant="option1" label='Account' aria-autocomplete="list" aria-controls="listbox-id-12" role="textbox" placeholder="Search..."></lightning-input> </div> <!-- Start : Parent Search Result --> <div if:true={messageResult}> No Result Found! </div> <template if:true={showSearchedValues}> <div class="slds-box" style="height: 130px; overflow-y: scroll;"> <ul class="" role=""> <template for:each={accountList} for:item="actObj"> <li class="slds-p-around_x-small" style="cursor: pointer;" key={actObj.Id} onclick={parentHandleAction} data-value={actObj.Id} data-label={actObj.Name}> {actObj.Name} </li> </template> </ul> </div> </template> </div> </div> </div> </div> </div> </div> </lightning-card> </template> |
Step 5:- Create Lightning Web Component : lwcAccountCustomLookup.js
SFDX:Lightning Web Component >> New >> lwcAccountCustomLookup.js
lwcAccountCustomLookup.js [LWC JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import { LightningElement, track, wire } from 'lwc'; import getCustomLookupAccount from '@salesforce/apex/lwcApexController.getCustomLookupAccount'; export default class LwcAccountCustomLookup extends LightningElement { @track accountName=''; @track accountList=[]; @track objectApiName='Account'; @track accountId; @track isShow=false; @track messageResult=false; @track isShowResult = true; @track showSearchedValues = false; @wire(getCustomLookupAccount,{actName:'$accountName'}) retrieveAccounts ({error,data}){ this.messageResult=false; if(data){ console.log('data## ' + data.length); if(data.length>0 && this.isShowResult){ this.accountList =data; this.showSearchedValues=true; this.messageResult=false; } else if(data.length == 0){ this.accountList=[]; this.showSearchedValues=false; if(this.accountName != ''){ this.messageResult=true; } } else if(error){ this.accountId=''; this.accountName=''; this.accountList=[]; this.showSearchedValues=false; this.messageResult=true; } } } searchHandleClick(event){ this.isShowResult = true; this.messageResult = false; } searchHandleKeyChange(event){ this.messageResult=false; this.accountName = event.target.value; } parentHandleAction(event){ this.showSearchedValues = false; this.isShowResult = false; this.messageResult=false; //Set the parent calendar id this.accountId = event.target.dataset.value; //Set the parent calendar label this.accountName = event.target.dataset.label; console.log('accountId::'+this.accountId); const selectedEvent = new CustomEvent('selected', { detail: this.accountId }); // Dispatches the event. this.dispatchEvent(selectedEvent); } } |
Step 6:- Create Lightning Web Component : lwcAccountCustomLookup.js-meta.xml
SFDX:Lightning Web Component >> New >> lwcAccountCustomLookup.js-meta.xml
lwcAccountCustomLookup.js-meta.xml [LWC Meta Data XML]
1 2 3 4 5 6 7 8 9 10 |
<?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> |
Step 7:- Create Lightning Web Component : lwcApexController.cls
SFDX:Create Apex Class >> New >> lwcApexController.cls
lwcApexController.cls[Apex Class Controller]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public with sharing class lwcApexController { //custom lookup lwc @AuraEnabled(cacheable=true) public static List<Account> getCustomLookupAccount (String actName){ List<Account> accLookupList = new List<Account>(); if(actName != ''){ String accountName = '%' + actName + '%'; accLookupList = [Select Id, Name From Account Where Name like:accountName]; return accLookupList; } return accLookupList; } } |
Further post that would you like to learn in LWC