Introduction:
In Salesforce Lightning Web Components (LWC), implementing a multi-select lookup field can enhance the user experience and provide greater flexibility for selecting multiple related records. In this blog post, we will walk through the process of creating a multi-select lookup field using LWC. We will cover the required code snippets and provide step-by-step instructions to help you implement this functionality in your Salesforce org.
Prerequisites:
Before diving into the code, make sure you have a basic understanding of LWC and Salesforce development. Familiarity with JavaScript, HTML, and CSS is also recommended. Additionally, ensure that you have Salesforce DX installed and configured in your development environment.
Step 1: Set up the LWC Component
1. Create a new Lightning Web Component by running the following command in your terminal:
sfdx force:lightning:component:create -n MultiSelectLookup -d force-app/main/default/lwc
2. Open the newly created MultiSelectLookup folder and navigate to the MultiSelectLookup file.
3. Replace the existing code in MultiSelectLookup with the following code:
import { LightningElement, api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import searchRecords from '@salesforce/apex/CustomController.searchRecords';
export default class MultiSelectLookup extends LightningElement {
@api selectedRecords = [];
handleSearch(event) {
const searchTerm = event.target.value;
searchRecords({ searchTerm })
.then((result) => {
// Process the search results
})
.catch((error) => {
this.showToast('Error', error.message, 'error');
});
}
handleRecordSelection(event) {
const selectedRecordId = event.currentTarget.dataset.recordId;
// Handle the selection logic
}
showToast(title, message, variant) {
const toastEvent = new ShowToastEvent({
title: title,
message: message,
variant: variant
});
this.dispatchEvent(toastEvent);
}
}
Step 2: Implement the Search Functionality
1. Create an Apex class (e.g., CustomController) with a method called searchRecords that accepts a search term as a parameter and returns the matching records. Here's an example of how the Apex method could look:
public with sharing class CustomController {
@AuraEnabled(cacheable=true)
public static List<SObject> searchRecords(String searchTerm) {
// Implement the search logic and return the records
// For example, use SOQL to fetch matching records
return [SELECT Id, Name FROM Account WHERE Name LIKE :searchTerm LIMIT 10];
}
}
2. Make sure to annotate the searchRecords method with @AuraEnabled(cacheable=true) to enable client-side caching for improved performance.
Step 3: Build the Search and Selection UI
1. Open the MultiSelectLookup file in your MultiSelectLookup component folder.
2. Replace the existing code in MultiSelectLookup with the following code:
<template>
<lightning-input type="text" label="Search" onchange={handleSearch}></lightning-input>
<lightning-card>
<template if:true={searchResults}>
<template for:each={searchResults} for:item="record">
<div key={record.Id} class="record-item" data-record-id={record.Id} onclick={handleRecordSelection}>
{record.Name}
</div>
</template>
</template>
</lightning-card>
</template>
Step 4: Handle Record Selection
1. Navigate back to the MultiSelectLookup file.
2. Implement the logic for handling record selection in the handleRecordSelection method. You can update the method as per your requirements, such as limiting the number of selected records or validating the selection.
3. Maintain the selected records in the selectedRecords property and use it to display the selected records in your component.
Conclusion:
Congratulations! You have successfully implemented a multi-select lookup field using Salesforce Lightning Web Components (LWC). This functionality allows users to search for and select multiple related records within a single input field. Feel free to customize the code to suit your specific use cases and expand the functionality further.
Happy coding!