Introducing Lightning Record Picker: A New Era of Record Selection

Have you ever struggled to build your own custom component for finding and selecting Salesforce records? The Winter '24 release of Salesforce introduced the lightning-record-picker component, a much-anticipated addition to the Lightning Web Components (LWC) toolkit. This new component addresses a longstanding challenge faced by LWC developers: the lack of a straightforward and user-friendly way to incorporate record selection functionality into their components.

The lightning-record-picker component allows you to search for a list of Salesforce Records that match search input. It uses the GraphQL wire adapter to search for records, displays the records, and allows the user to select a record. The lightning-record-picker will be Generally Available (GA) in Spring ’24. In this post, let’s see how to use lightning-record-picker in your custom LWC components.

Implementing Lightning Record Picker

lightningRecordPicker.html 
<template>

<lightning-card title="Lightning Record Picker" class="slds-card__body_inner" icon-name="standard:search">
	<div>
	    <lightning-record-picker label="Select a record" placeholder="Search..." object-api-name="Contact"             onchange={handleChange} matching-info={matchingInfo} display-info={displayInfo} filter={filter}>
	    </lightning-record-picker>
	</div>
</lightning-card>

</template>
lightningRecordPicker.js
import { LightningElement } from 'lwc';
export default class LightningRecordPicker extends LightningElement {
    matchingInfo = {
    primaryField: { fieldPath: "Name" },
    additionalFields: [{ fieldPath: "Email" }],
  };
  displayInfo = {
    additionalFields: ["Title", "Email"],
  };
  // filter Contacts having Accounts starting with "Post"
  filter = {
    criteria: [
      {
        fieldPath: "Account.Name",
        operator: "like",
        value: "Post%",
      },
    ],
  };

  handleChange(event) {
    console.log(`Selected record: ${event.detail.recordId}`);
  }
}
lightningRecordPicker.js-meta.xml
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<masterLabel>Lightning Record Picker</masterLabel>
	<targets>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>
Key Feature of lightning-record-picker
The lightning-record-picker component offers several key features that makes it valuable:

Simplified Development: The Component eliminates the need for complex code or third-party libraries, thus simplifying development.
Offline Support: Thanks to Salesforce’s secure offline record support paired with GraphQL to access offline data users can select records even when they are not connected to the internet.
User-friendly Interface: The component features a user-friendly interface with intuitive search and selection capabilities. enhancing user experience.
Seamless Integration: lightning-record-picker is part of the base Lightning components (see Lightning Web Components Developer Guide), which means that you can use it easily.
If you need to search for records on mobile or while offline, then the Record Picker is your best bet.
Resources:
To learn more about lightning-record-picker refer  Record Picker in Lightning Web Component library. 
Don’t forget to explore the sample code (Record Picker Hello, Record Picker Dynamic Target).
I hope you enjoyed the learning. Please write me back the suggestions, comments or any issues. Let's meet again in our next blog for more fun and learning.
THANK YOU.