Generic Custom Lookup Lightning Web Component

-

Hello Trailblazers, 

In this blog I have created generic lookup component using LWC which can be used directly without changing single line of code. You just have to pass object name, fields to be retrieved and fieldname on which search operation should happen while using this component along with event handler method, that’s it you are ready to use record captured in lookup field. Which makes it available for use multiple times in single component.  

This example contains below main components : 
1.       GenericLookup – Apex class for querying records 
2.       genericLookup  - LWC Main component - This you will be using as per your need 
3.       recordListItem  - LWC to render suggested records 

First lets have a look at GenericLookup class
Now create recordListItem component



This component is used to render each record which is returned based on your search string. And when you click on any of the record it fires an event with record that has been selected.

And finally genericLookup component



This component basically gets the input from user as search value and makes call to apex whenever search-key length is greater than 3(you can change this value as per your logic). Once records are received, recordListItem is used initeration to display the records. This component also handles the event fired by recordListItem component upon selection from user.

Now how to use this in your component ? Few simple steps ...
Copy paste below code to your desired place, change attributes, write handler method and done !

  • search-field : This should be replaced by the field name on which you wish to apply filter
  • retrieve-fields : String with field names separated by "," (Name,AccountId,CustomField__c)
  • object-name : Name of object
  • field-label : Label you want to give to lookup field
  • onselectrecord : Event that needs to be handled. Get data using "event.detail", this will give you entire record that is selected.
Note : Do not use Id field in retrieve-fields attribute as it is already mentioned in Apex class, you can directly use it.

This way you can use this component as many times in your single component.
You can code from Github as well.
Please share your feedback/concerns by commenting.

Thank You !!

Comments

Post a Comment

Popular posts from this blog

Salesforce Flow - Create multiple records from user input

-
Image
Hello Trailblazers, We all know how powerful Salesforce flows are. We can achieve many functionalities using flows without writing single line of code. Recently, I came across situation where I wanted to create multiple records of an object by taking inputs from user. And I came with solution using flows where we can ask user whether he wants add another record and allow him to create multiple records. We are going to discuss that solution in this blog. We are going to use Assignment & Decision elements for implementing this solution. Here we will ask user whether he wants to add another record or not after entering details for one record. And basis on user’s input we will make decisions. We can use Loop element as well but in that case we should have idea of how many records needs to be created. With solution explained below user can create as many records. Implementation Details :  For this demo we will create flow which will take lead first name, last name & compan...
Read more

Scan barcodes from Salesforce Mobile App

-
Image
Hello Trailblazers, Today I am going discuss a newly added functionality to Salesforce Mobile platform which has given us ability to scan the barcodes from salesforce mobile app using Lightning Web Component implementation. With the help of this Barcode Scanner API we can now read UPC, QR and other type of barcodes from Lightning Web Component.  This API is made generally available by Salesforce after February 2022. Lightning Web Component uses your mobile camera and mobile OS capabilities to scan the barcode and then sends data back to LWC from where process was invoked. You can use any UI(Button, link etc.) to start barcode scanning. So, the general flow will be initiate barcode scanning from lightning web component then mobile camera will be opened and once valid barcode is scanned you will be returned to your lightning web component which initiated this scan with data which you can process. BarcodeScanner API This barcode scanner API has capability to scan single barcode as wel...
Read more

Zip or Unzip Files in Salesforce

-
Image
Hello Trailblazers, Though Salesforce provides wide variety of out of the functionalities, in house solutions – creating a zip file or unzipping it in apex is still something that is not provided by Salesforce. For one of my work I came across situation where I wanted to zip multiple files together and I couldn’t find anything through Salesforce documentations. After spending some time over internet, I came across few workarounds which can be used to create zip files in Salesforce.  Listing down three of them for three different platform solutions. Zippex Utility This is Apex based utility which can help you to zip files along with other useful operations. This utility code developed by Pedro Dal Col & Pliny Smith is available on GitHub and you can deploy it’s components directly to you org as well. As per me this utility is very much powerful as it provides unzip feature as well. You can have folder structure as well or you can club multiple individual files as well using Zi...
Read more