Lightning Record Picker in LWC

by Rijwan Mohmmed
14 comments
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.

lightning-record-picker-in-lwc-techdicer

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
What’s your Reaction?
+1
6
+1
1
+1
0
+1
0
+1
1
+1
0

You may also like

14 comments

appu January 9, 2024 - 12:59 pm

Hi Rijwan can we use this lightning record picker in the lightning data table instead of a custom component for lookup-related column.

Reply
Rijwan Mohmmed January 9, 2024 - 2:35 pm

Yes we can @Appu

Reply
Appu January 13, 2024 - 12:39 am

Hi Rijwan thanks for the reply. How can we add this lightning record picker inside the lightning data table?

Reply
Rijwan Mohmmed January 13, 2024 - 1:41 pm

Hi @Appu, Let me try this one

Reply
Rijwan Mohmmed January 13, 2024 - 2:17 pm

Hi @Appu, I tried with lightning record picker in LWC datatable and its working fine, Can you please schedule a meeting by below link, I will guide you

https://topmate.io/rijwan_mohmmed

Reply
Appu January 15, 2024 - 7:01 am

Hi Rijwan, I scheduled a meeting from the given link for today at 10:00 PM IST.
But did not get any meeting link. Kindly share the link if I missed it.

Rijwan Mohmmed January 15, 2024 - 8:07 am

Hi @Appu, I got the your request. Join the meeting by topmate on given time.

Appu January 15, 2024 - 8:17 am

Hi Rijwan , I think I added the wrong email address on Topmate for scheduling the meeting.
How can I correct the email address?

Reply
Rijwan Mohmmed January 15, 2024 - 8:21 am

Login to Topmate and check your call

Reply
Rijwan Mohmmed January 15, 2024 - 8:22 am

Share me your email Id I will send the meeting link

Reply
Appu January 15, 2024 - 8:28 am

Thanks, a lot. My email address is sappu9899@gmail.com

Reply
Maulik Vadodariya February 10, 2024 - 5:24 pm

Hi,
I have use case where I want to initialize the record picker while components loads and then user can change by typing in so How to initialize the ?

Reply
Rijwan Mohmmed February 11, 2024 - 5:33 am

Hi Maulik, set a value in the record picker

Reply
Udaya March 1, 2024 - 1:30 pm

Can you please help how can we include lightning record picker as one of the column in LWC datatable

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.