Articles
Salesforce Compliance: Crafting a Data Recovery Plan to Safeguard Your...
What’s trending
UPCOMING EVENTS
Lightning Record Picker in Salesforce: Your Ultimate Guide
October 07, 2024
Salesforce is continually improving its platform to provide a smoother user experience. One such component that has seen significant enhancements is the lightning-record-picker. The lightning-record-picker component enables anyone using an app on the Salesforce Platform to quickly and easily find and select Salesforce records.
The Lightning Record Picker is a user interface component that allows users to search and select records from Salesforce objects such as Account, Contact, and other standard, custom objects. It simplifies the record selection process and can be used in various scenarios where users need to associate or link records.
Key Features of Lightning Record Picker
- Enhanced Record Retrieval with Lightning Record Picker: Retrieve up to 100 records, doubling the previous limit of 50.
- GraphQL Wire Adapter: The component leverages the GraphQL wire adapter to support offline use, ensuring a consistent user experience whether online or offline. Additionally, it is compatible with both desktop and mobile platforms, enhancing its versatility.
- Flexibility: Tailor the Record Picker to your specific requirements by selecting and configuring the desired fields for retrieving and displaying results.
- Customization: This component provides a variety of customization options to suit your individual needs.
- Matching Fields: By default, the Name field of an object is used for matching. However, this can be overridden to use any text or text formula field, and you can also add additional fields for matching.
- Display Fields: Initially, only the Name field is displayed, but adding a secondary field enhances the user experience, helping them more easily locate the correct record.
- Filtering: The Record Picker provides extensive control over record filtering, supporting a wide range of field types, operators, and custom logic combinations. It also includes support for SOQL-like operator wildcards.
- Validation: The Record Picker component features validation to ensure data integrity and accurate user input. Validation messages appear when the component loses focus or through the reportValidity() method. Additionally, custom validation messages can be set using setCustomValidity().
Below is the code snippet that shows how lightning-record-picker works:
contactsLightningRecordPicker.html
<template>
<lightning-card title="Select a Contact">
<div class="slds-p-around_medium">
<lightning-record-picker
label="Choose a Record"
placeholder="Search Contacts..."
object-api-name="Contact"
value={contactId}
onchange={handleRecordChange}
size="large"
icon-name="standard:contact"
variant="label-hidden">
</lightning-record-picker>
</div>
<template if:true={contact.data}>
<div class="slds-m-top_medium">
<lightning-card title="Selected Contact">
<div class="slds-p-around_medium">
<p><strong>Name:</strong> {contact.data.fields.Name.value}</p>
<p><strong>Email:</strong> {contact.data.fields.Email.value}</p>
<p><strong>Phone:</strong> {contact.data.fields.Phone.value}</p>
</div>
</lightning-card>
</div>
</template>
</lightning-card>
</template>
contactsLightningRecordPicker.js
import { LightningElement, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
'Contact.Name',
'Contact.Email',
'Contact.Phone'
];
export default class ContactsLightningRecordPicker extends LightningElement {
@track contactId;
@wire(getRecord, { recordId: '$contactId', fields: FIELDS })
contact;
handleRecordChange(event) {
this.contactId = event.detail.recordId;
}
}
contactsLightningRecordPicker.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>61.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
leadsLightningRecordPicker.html
<template>
<lightning-card title="Select Lead">
<div class="slds-p-around_medium">
<lightning-record-picker
label="Choose a Record"
placeholder="Search Leads..."
object-api-name="Lead"
filter={filter}
display-info={displayInfo}
matching-info={matchingInfo}
variant="label-hidden">
</lightning-record-picker>
</div>
</lightning-card>
</template>
leadsLightningRecordPicker.js
import { LightningElement } from 'lwc';
export default class LeadsLightningRecordPicker extends LightningElement {
filter = {
criteria: [
{
fieldPath: 'LeadSource',
operator: 'eq',
value: 'Web'
}
]
};
displayInfo = {
additionalFields: ['Company']
}
matchingInfo = {
primaryField: { fieldPath: 'Email' },
additionalFields: [ { fieldPath: 'Phone' } ]
}
}
leadsLightningRecordPicker.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>61.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Summary
This article has hopefully helped you understand how to use the lightning-record-picker component for record selections in Salesforce apps for a better user experience.
Make sure to leave your feedback in the comments below!
More like this:
