Lightning Record Picker in Salesforce

Salesforce continues to enhance its platform to improve the user experience, and one of the components benefiting from these improvements is the lightning-record-picker. This versatile component allows users to quickly find and select Salesforce records, streamlining workflows across apps on the Salesforce Platform.

Thank you for reading this post, don't forget to subscribe!

Overview of the Lightning Record Picker

The Lightning Record Picker component simplifies the process of searching and selecting records from Salesforce objects like Account, Contact, and other standard and custom objects. It’s designed for various use cases where users need to associate or link records, making it an essential tool for improving efficiency.

Key Features of the Lightning Record Picker

Enhanced Record Retrieval: The Lightning Record Picker now retrieves up to 100 records, doubling the previous limit of 50.
GraphQL Wire Adapter: With support for offline use, the component ensures a consistent experience across desktop and mobile platforms, leveraging the GraphQL wire adapter.
Flexibility: Customize the fields used for retrieving and displaying results to meet specific requirements.
Customization: It offers a range of customization options for different use cases, from changing fields to adjusting the search criteria.
Matching Fields: By default, the Name field is used for matching, but you can override this to use other text fields, as well as add additional fields to enhance search accuracy.
Display Fields: Initially, only the Name field is displayed, but you can add secondary fields to make it easier for users to identify the correct record.
Filtering: The Record Picker supports flexible filtering with a variety of field types, operators, and custom logic, similar to SOQL-like wildcards.
Validation: The component includes validation features to ensure data integrity, with custom validation messages available through methods like setCustomValidity().

Example Code for Lightning Record Picker

Here’s an example of how to implement the lightning-record-picker for selecting Contacts and Leads:

Contacts Record Picker (HTML):

htmlCopy code<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>

Contacts Record Picker (JavaScript):

javascriptCopy codeimport { 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;
   }
}

Leads Record Picker (HTML):

htmlCopy code<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>

Leads Record Picker (JavaScript):

javascriptCopy codeimport { 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' } ]
   }
}

Summary

The lightning-record-picker component enhances the record selection process in Salesforce applications, offering a more intuitive and flexible experience for users. With its ability to handle larger datasets, customizable fields, and strong validation features, it is a powerful tool for developers to incorporate into their Salesforce applications.