Create a Contact Record With Re-Usable Dynamic Custom Lookup Field in Lightning Web Component — LWC
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
It is Templae HTML file where we are 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.
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 post that would you like to learn
Step 1:- Create Lightning Web Component : lwcCreateContactCustomLookup.html
SFDX:Lightning Web Component >> New >> lwcCreateContactCustomLookup.html
lwcCreateContactCustomLookup.html [Lightning Web Component HTML]
Step 2:- Create Lightning Web Component : lwcCreateContactCustomLookup.js
SFDX:Lightning Web Component >> New >> lwcCreateContactCustomLookup.js
lwcCreateContactCustomLookup.js [LWC JavaScript File]
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]
Lightning Web Component Meta XML
Step 4:- Create Lightning Web Component : lwcAccountCustomLookup.html
SFDX:Lightning Web Component >> New >> lwcAccountCustomLookup.html
lwcAccountCustomLookup.html [Lightning Web Component HTML]
Step 5:- Create Lightning Web Component : lwcAccountCustomLookup.js
SFDX:Lightning Web Component >> New >> lwcAccountCustomLookup.js
lwcAccountCustomLookup.js [LWC JavaScript File]
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]
Lightning Web Component Meta XML
Step 7:- Create Lightning Web Component : lwcApexController.cls
SFDX:Create Apex Class >> New >> lwcApexController.cls
lwcApexController.cls[Apex Class Controller]
Originally published at https://www.w3web.net on October 5, 2020.
