Lightning Record Picker in LWC

Hello friends, today we will discuss Lightning Record Picker in LWC. It’s a powerful component that allows users to search, select, and link to Salesforce records, (like Lookup field) all within the comfort of your Lightning Web Component. Previously we used custom LWC lookup fields for this, and in this, we created a separate component. But now Salesforce has released a new component.

The Lightning Record Picker is a user interface component provided by Salesforce that allows users to search and select records from Salesforce objects such as Accounts, Contacts, Opportunities, and custom objects. It simplifies the process of record selection and can be used in various scenarios where users need to associate or link records.

Also, check this: Drag and Drop Fields in LWC

Key Highlights :

1. User-Friendly: Simplify record selection for users, enhancing data accuracy and efficiency.
2. Streamlined Workflow: Streamline processes by linking records directly within your LWC.
3. Data Integrity: Ensure that related records are accurately associated with one another.
4. Customization: Developers can configure the Lightning Record Picker to work with specific objects, define search filters, and even customize the appearance to match the application’s look and feel.
5. Multi-Select mode: The Record Picker could support multi-select mode, enabling the selection of multiple records at once.
6. No need for a custom lookup component.

Code :

recordPickerWithFilter.html:

<template>

	<lightning-card variant="Narrow" title="Lightning Record Picker in LWC" icon-name="standard:record_lookup">
		<div class="slds-p-horizontal_small">
			<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>
            <br/><br/>
            <h3> Selected Record Id : {id} </h3>
		</div>
	</lightning-card>
</template>

recordPickerWithFilter.JS:

import { LightningElement } from "lwc";

export default class RecordPickerWithFilter extends LightningElement {
    id;

    //on type we do search record according below marching where clouse
    matchingInfo = {
        primaryField: { fieldPath: "Name" },
        additionalFields: [{ fieldPath: "Email" }],
    };

    displayInfo = {
        additionalFields: ["Email", "Title"],
    };

    // filter Contacts having email
    filter = {
        criteria: [
            {
                fieldPath: "Email",
                operator: "ne",
                value: "",
            }
        ],
    };

    handleChange(event) {
        console.log(`Selected record: ${event.detail.recordId}`);
        this.id = event.detail.recordId;
    }
}

recordPickerWithFilter.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. Record Picker
2. Lightning Record Picker Component