What Is A Custom Lightning Record Picker Lookup Field?
The Lightning Record Picker Lookup Field component is a powerful tool in Salesforce that simplifies user record selection processes. This user-friendly interface allows users to easily search and select records from a specified object. Incorporating the lightning-record-picker
enhances the user experience in Salesforce applications. This feature not only improves usability but also allows for greater customization, making it a valuable addition to any Salesforce implementation. If you need help getting setup for LWC development, checkout this previous blog post on ‘The Adam Swanson Blog’.
Key Features:
- Dynamic Record Search
Users can quickly find records by typing keywords, enabling a seamless searching experience. - Intuitive Display Options
The component presents records in an organized list format, making it easy for users to browse through their choices. - Customization Capabilities
Developers can tailor the component to display specific objects and fields, ensuring it meets the needs of their applications. - Event Handling
The component emits events that developers can utilize to capture selected records and integrate them into their application logic.
Transitioning To An Easier Custom Lookup Field
Previously creating a custom record lookup field in Salesforce required developers to use a combination of the lightning-record-edit-form
and a lightning-input-field
. For instance, the code snippet below demonstrates the old approach:
<lightning-record-edit-form object-api-name="Contact">
<lightning-input-field field name="Account" value={selectedAccount} onchange={handleSelection}>
</lightning-input-field>
</lightning-record-edit-form>
In addition to the HTML code snippet, you would also have a JavaScript handle method listening to a change event. Finally, you would capture the event.target.detail
in the JavaScript handler method and assign it to the selectedAccount
JavaScript property to display what was selected.
Structure Of The New Lightning Record Picker Lookup Field
With the introduction of the lightning-record-picker
component, developers can now create custom lookup fields more easily and efficiently. This new component streamlines the process, allowing for a more user-friendly interface and reducing the amount of code required. In addition, this transition marks a pivotal step forward in simplifying the creation of custom LWC record lookups, making it an essential tool for modern Salesforce applications. To illustrate, the HTML code snippet below shows the new way to implement custom LWC lookup fields!
<lightning-record-picker
label="Custom LWC Lookup Field"
placeholder="Search Accounts..."
object-api-name="Account">
</lightning-record-picker>
The object-api-name
attribute specifies the API name of the Salesforce object that you want to allow users to select records from. This attribute defines the type of records that will be displayed in the picker, such as Account
, Contact
, or any custom object like CustomObject__c
. When you set this attribute, the component fetches records of the specified object, enabling users to search for and select records related to that object type. It’s an essential part of configuring the component for your specific use case within Salesforce.
Customizing Display Of Lightning Record Picker Lookup Suggestions
In order to modify how record suggestions are displayed in the record picker, the display-info
attribute should be utilized. This attribute references an object that defines both the main field and an additional field for display. The system shows the name field of the target object by default. Now, let’s build on our example above!
<lightning-record-picker
label="Custom LWC Lookup Field"
placeholder="Search Accounts..."
object-api-name="Account"
display-info={displayInfo}>
</lightning-record-picker>
First we add the display-info
property to our HTML code above. Next we incorporate JavaScript to define the displayInfo
property. This step is crucial as it actively informs our HTML code on how to display the search results. Additionally, by correctly defining this property we enhance the user experience and improve the overall functionality of our web page. We will display the Account Name and then the Type field by initializing this JavaScript property. Here is the JavaScript code below!
displayInfo = {
primaryField: 'Name',
additionalFields: ['Type'],
};
Customize The Search For LWC Record Lookups
By default, the search focuses on the name field of the target object. If you want to search for matches in different or additional fields, you should set the matching-info
attribute. This attribute points to an object that specifies which fields the search will query based on the terms entered in the record picker. For example, the following matchingInfo
configuration searches through Account records where either the Name or Type field includes the user’s search term.
<lightning-record-picker
label="Custom LWC Lookup Field"
placeholder="Search Accounts..."
object-api-name="Account"
display-info={displayInfo}
matching-info={matchingInfo}>
</lightning-record-picker>
First we add the matching-info
property to our HTML code above. Then we incorporate JavaScript to define the matchingInfo
property. We will search the Account Name and Type field by initializing this JavaScript property. Here is the JavaScript code below!
matchingInfo = {
primaryField: { fieldPath: 'Name'},
additionalFields: [{ fieldPath: 'Type' }],
};
Capturing Selected Records Using The Lightning Record Picker
The lightning-record-picker
component generates events that developers can use to capture selected records and incorporate them into their application logic. The change event triggers whenever a record is selected or cleared. By leveraging the change event we aim to capture event.detail.recordId
. Below, you can see the complete HTML and JavaScript code for the custom LWC record lookup component.
HTML Code
<lightning-record-picker
label="Custom LWC Lookup Field"
placeholder="Search Accounts..."
object-api-name="Account"
display-info={displayInfo}
matching-info={matchingInfo}
onchange={handleChange}>
</lightning-record-picker>
JavaScript Code
displayInfo = {
primaryField: 'Name',
additionalFields: ['Type'],
};
matchingInfo = {
primaryField: { fieldPath: 'Name'},
additionalFields: [{ fieldPath: 'Type' }],
};
handleChange(event) {
console.log(${event.detail.recordId});
}
For more information about this new LWC, please refer to this Trailhead: JavaScript Developer I Certification Maintenance (Summer ’24)
Leave a Reply