Reusable Lookup in LWC are one of the important element in custom development. Generally, Lookup is an autocomplete combobox that will search against a database object. We are going to build a custom dynamic reusable Lookup field in Lightning Web Component. Some of the key features are:-
1. Dynamic Lookup Component shows two fields for each item in search panel
2. You can pre-populate the lookup field by just passing the id of the selected record
3. It shows the Icon of the related SObject and can be set dynamically
4. Custom Lookup also shows you the object label in search panel for each item
5. This Reusable Lookup can be extended with other LWC as it fires a custom event whenever a value is selected so that consumer can handle it
Code for Single Select ReusableLookup
Let’s create a Lightning Web Component in VS Code with name reusableLookup.
reusableLookup.html
The html file of the reusable lookup component has code derived from slds-lookup. It has three main parts.
1. When lookup is in selected state
2. When lookup is not in selected state
3. When Lookup shows result in serach panel
The js file of the lwc has exposed required parameters as public so that they can be set. It also has several private methods to handle the various events on input element.
import { LightningElement, api } from 'lwc';
import fetchRecords from '@salesforce/apex/ReusableLookupController.fetchRecords';
/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 500;
export default class ReusableLookup extends LightningElement {
@api helpText = "custom search lookup";
@api label = "Parent Account";
@api required;
@api selectedIconName = "standard:account";
@api objectLabel = "Account";
recordsList = [];
selectedRecordName;
@api objectApiName = "Account";
@api fieldApiName = "Name";
@api otherFieldApiName = "Industry";
@api searchString = "";
@api selectedRecordId = "";
@api parentRecordId;
@api parentFieldApiName;
preventClosingOfSerachPanel = false;
get methodInput() {
return {
objectApiName: this.objectApiName,
fieldApiName: this.fieldApiName,
otherFieldApiName: this.otherFieldApiName,
searchString: this.searchString,
selectedRecordId: this.selectedRecordId,
parentRecordId: this.parentRecordId,
parentFieldApiName: this.parentFieldApiName
};
}
get showRecentRecords() {
if (!this.recordsList) {
return false;
}
return this.recordsList.length > 0;
}
//getting the default selected record
connectedCallback() {
if (this.selectedRecordId) {
this.fetchSobjectRecords(true);
}
}
//call the apex method
fetchSobjectRecords(loadEvent) {
fetchRecords({
inputWrapper: this.methodInput
}).then(result => {
if (loadEvent && result) {
this.selectedRecordName = result[0].mainField;
} else if (result) {
this.recordsList = JSON.parse(JSON.stringify(result));
} else {
this.recordsList = [];
}
}).catch(error => {
console.log(error);
})
}
get isValueSelected() {
return this.selectedRecordId;
}
//handler for calling apex when user change the value in lookup
handleChange(event) {
this.searchString = event.target.value;
this.fetchSobjectRecords(false);
}
//handler for clicking outside the selection panel
handleBlur() {
this.recordsList = [];
this.preventClosingOfSerachPanel = false;
}
//handle the click inside the search panel to prevent it getting closed
handleDivClick() {
this.preventClosingOfSerachPanel = true;
}
//handler for deselection of the selected item
handleCommit() {
this.selectedRecordId = "";
this.selectedRecordName = "";
}
//handler for selection of records from lookup result list
handleSelect(event) {
let selectedRecord = {
mainField: event.currentTarget.dataset.mainfield,
subField: event.currentTarget.dataset.subfield,
id: event.currentTarget.dataset.id
};
this.selectedRecordId = selectedRecord.id;
this.selectedRecordName = selectedRecord.mainField;
this.recordsList = [];
// Creates the event
const selectedEvent = new CustomEvent('valueselected', {
detail: selectedRecord
});
//dispatching the custom event
this.dispatchEvent(selectedEvent);
}
//to close the search panel when clicked outside of search input
handleInputBlur(event) {
// Debouncing this method: Do not actually invoke the Apex call as long as this function is
// being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
window.clearTimeout(this.delayTimeout);
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout = setTimeout(() => {
if (!this.preventClosingOfSerachPanel) {
this.recordsList = [];
}
this.preventClosingOfSerachPanel = false;
}, DELAY);
}
}
Apex Controller of Reusable Lookup – ReusableLookupController
public with sharing class ReusableLookupController {
@AuraEnabled
public static List<ResultWrapper> fetchRecords(SearchWrapper inputWrapper) {
try {
if(inputWrapper != null){
String fieldsToQuery = 'SELECT Id, ';
if(string.isNotBlank(inputWrapper.fieldApiName)){
fieldsToQuery = fieldsToQuery + inputWrapper.fieldApiName;
}
if(string.isNotBlank(inputWrapper.otherFieldApiName)){
fieldsToQuery = fieldsToQuery + ', ' + inputWrapper.otherFieldApiName;
}
String query = fieldsToQuery + ' FROM '+ inputWrapper.objectApiName;
String filterCriteria = inputWrapper.fieldApiName + ' LIKE ' + '\'' + String.escapeSingleQuotes(inputWrapper.searchString.trim()) + '%\' LIMIT 10';
if(String.isNotBlank(inputWrapper.selectedRecordId)) {
query += ' WHERE Id = \''+ inputWrapper.selectedRecordId + '\'';
}else if(String.isNotBlank(inputWrapper.parentFieldApiName) && String.isNotBlank(inputWrapper.parentRecordId)){
query += ' WHERE '+ inputWrapper.parentFieldApiName+ ' = \''+ inputWrapper.parentRecordId + '\'';
query += ' AND ' + filterCriteria;
}
else {
query += ' WHERE '+ filterCriteria;
}
List<ResultWrapper> returnWrapperList = new List<ResultWrapper>();
for(SObject s : Database.query(query)) {
ResultWrapper wrap = new ResultWrapper();
wrap.mainField = (String)s.get(inputWrapper.fieldApiName);
wrap.subField = (String)s.get(inputWrapper.otherFieldApiName);
wrap.id = (String)s.get('id');
returnWrapperList.add(wrap);
}
return returnWrapperList;
}
return null;
} catch (Exception err) {
throw new AuraHandledException(err.getMessage());
}
}
public class ResultWrapper{
@AuraEnabled public String mainField{get;set;}
@AuraEnabled public String subField{get;set;}
@AuraEnabled public String id{get;set;}
}
public class SearchWrapper {
@AuraEnabled public String objectApiName{get;set;}
@AuraEnabled public String fieldApiName{get;set;}
@AuraEnabled public String otherFieldApiName{get;set;}
@AuraEnabled public String searchString{get;set;}
@AuraEnabled public String selectedRecordId{get;set;}
@AuraEnabled public String parentRecordId{get;set;}
@AuraEnabled public String parentFieldApiName{get;set;}
}
}
Demo – Reusable Lookup In LWC
We have placed the component to home page.You can add the component based on meta configuration.
Do you need help?
Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.
December 30, 2022 at 10:46PM Click here for more details...
=============================
The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================
Post a Comment