Lightning Record Picker in Salesforce

Salesforce has recently announced the Lightning Record Picker component. Lightning-record-picker is available in Beta and shall be Generally Available (GA) in Spring ’24.

Moreover, the Lightning Record Picker component in Lightning web components (LWC) provides a user-friendly interface for selecting records. This makes the process of associating records much easier and more intuitive.

One notable feature of the Lightning Record Picker is its offline capability, ensuring a consistent user experience whether users are working online or offline.

Additionally, it is designed to be compatible with both desktop and mobile platforms, thereby enhancing its versatility.

In this example, we are also creating a simple lightning record picker component to search the Account records. To initialize, all we need is a label for the input field, the object name from which particular data would be searched, and a callback to handle the selection of the record.

lightningRecordPicker.html

 </template>

<lightning-card
title="Lightning Record Picker"
class="slds-card__body_inner"
icon-name="standard:search">

<div>
<lightning-record-picker
object-api-name="Account"
placeholder="Search..."
label="Select a record"
onchange={handleChange}>
</lightning-record-picker>

</div>

</lightning-card>
</template>

lightningRecordPicker.js

 import { LightningElement } from 'lwc';
export default class LightningRecordPicker extends LightningElement {
handleChange( event ) {
console.log(event.detail.recordId);
}
}

Output:

Also Read: Trigger Scenario-Based Questions in Salesforce

Lightning Record Picker with Dynamic Targets

The above example explains a Lighting record picker with a static filter, Let explore a lightning record picker with dynamic targets.

The record picker component offers strong capabilities to improve user interaction and data retrieval while integrating seamlessly with your page.

Additionally, you can add a placeholder, implement validation, and more. Moreover, this component provides various customizations that can be tailored based on our specific requirements.

1. Matching Fields: By default, it includes the object name. Moreover, on top of it, you can additionally display a field with text or formula field type. You can also use more fields for matching criteria.

2. Display Fields: Similarly, users appreciate it when we add a secondary field to aid in finding the correct record (especially when there are several records with similar names). Initially, we display the Name field.

3. Filtering: Record Picker gives you complete control over how records are filtered for your users, including the ability to mix custom logic, field types, and operators. Additionally, operator wildcards to SOQL are supported.

4. Validation: Validation is supported by the Record Picker component to guarantee user input and data integrity.

Validation messages may appear not only when you use the `reportValidity()` function but also when the component leaves focus. Moreover, SetCustomValidity() allows you to set custom validation messages as well.

lightningRecordPickerDynamic.html

<template>
<lightning-card
title="Lightning Record Picker Dynamic"
class="slds-card__body_inner"
icon-name="standard:search">
<div class="slds-form-element">
<label class="slds-form-element__label">Select a record</label>
<div class="slds-form-element__control slds-combobox-group">
<template if:true={showTargetSelector}>

<!-- Target selector -->

<lightning-combobox
data-id="targetSelector"
label="Select a target sObject"
variant="label-hidden"
options={targetObjects}
value={selectedTarget}
onchange={handleTargetSelection}
class="slds-combobox_object-switcher slds-combobox-addon_start">

</lightning-combobox>
</template>

<lightning-record-picker
object-api-name="Account"
placeholder="Search..."
label="Select a record"
variant="label-hidden"
display-info={displayInfo}
matching-info={matchingInfo}
onchange={handleRecordSelect}
filter = {filter}
class="slds-size_full slds-combobox-addon_end">
</lightning-record-picker>
</div>
</div>
</lightning-card>
</template>

lightningRecordPickerDynamic.js

import { LightningElement } from 'lwc';

export default class lightningRecordPickerDynamic extends LightningElement {
targetObjects = [
{
label: 'Account',
value: 'Account'
}
];
selectedTarget = 'Account';
currentSelectedRecordId = null;

displayInfos = {
Account: {
additionalFields: ['Name']
}
};

filter = {
criteria: [
{
fieldPath: "Name",
operator: "like",
value: "%Company%",
},
],
};

matchingInfos = {
Account: {
additionalFields: [{ fieldPath: 'Name' }]
}
};

get displayInfo() {
return this.displayInfos[this.selectedTarget];
}

get matchingInfo() {
return this.matchingInfos[this.selectedTarget];
}

get showTargetSelector() {
return this.currentSelectedRecordId === null;
}

handleTargetSelection(event) {
// Prevent lightning-combobox `change` event from bubbling
event.stopPropagation();

this.selectedTarget = event.target.value;
this.refs.recordPicker.clearSelection();
}

handleRecordSelect(event) {
this.currentSelectedRecordId = event.detail.recordId;
}
}

Output :

In the above example, we have implemented the Lightning Record Picker with dynamic targets, incorporating various attributes such as DisplayInfo, matching info, and Filter.

Specifically, the Filter attributes include the Name field, ensuring that only account names containing “Company” will be displayed.

Get a complete Roadmap To Learn Salesforce Admin And Development