Custom Lookup Component in Salesforce LWC

Custom Lookup is a very useful component if you are creating a custom form or custom component with editable fields. Rest all field type components like input, combobox, checkbox, textarea are available but for lookup, you need to create one.

Custom Lookup is a small component and very easy to create. We will create this within a single component without using any child component or event. You can find the complete source code at the bottom of the page.

Custom Lookup component Features:

  • Single component
  • Will work on any object
  • Spinner to show processing
  • Ability to set sObject Icon
  • Option to set placeholder & label
  • Ability to show error in the dropdown if any occurs.

Demo GIF:

Also Check, Custom Lookup using Aura Lightning

Also Check, Multi-Select Lookup Lightning Component

Step-1: Create an Apex controller

Our apex controller will fetch records on passing object and fields name to it. Here we are using a wrapper class which will return records in the form of value and label.

Custom Lookup LWC selected Pill custom lookup LWC Search

Create CustomLookupController.cls Apex class.

Step-2: Now we will create the CustomLookup Lightning Web Component.

For creating a new LWC component, you need to use the VS Code IDE.

Markup for customLookup.html

Now open the javascript file customLookup.js and paste the below code.

Now finally paste the CSS in the customLookup.css file.

 

Step-3: Now we will call the component.

Finally, our component is ready to use. Now while calling this component, you need to pass the objectName, fieldName, and iconName (optional) to this custom component. You can also set additional attributes.

You can check the list of available icons here LDS Icons.

custom lookup lwc salesforce

Update

Code Updated. Required and className attributes are added to the component. className will add SLDS class to the outermost div. Required is a boolean attribute, on setting true, an asterisk icon will be shown before the label.

Also Check:

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments