Lightning Record Picker Component in Salesforce

The lightning-record-picker is a Salesforce Lightning Web Component that allows users to search and select a record from a specified object. It provides a user-friendly interface for selecting records and can be used in various contexts within Salesforce Lightning Experience.

The lightning-record-picker component can be used in a Salesforce application to allow users on desktop or mobile devices to quickly find and select Salesforce records. The component's behavior and presentation can be configured, and filtering can enable users to retrieve and display records that meet specific criteria. This feature is generally available and includes changes since the last release. Previously, the component allowed for a maximum of 50 records, but now you can retrieve up to 100. Additionally, the component displays clear error messages when configuring invalid specifications and supports new attributes. To enable offline use, this component uses the GraphQL wire adapter.

Below is an imaginary example of what such a custom Lightning Web Component might look like,

Create a Lightning Web Component.

In the HTML file (recordPicker.html), use the lightning-record-picker component.

<template>
    <lightning-record-picker
        record-id={selectedRecordId}
        onrecordselect={handleRecordSelect}
        object-api-name="Account"
        icon-name="standard:acsount"
        size="medium"
        label="Select Account">
    </lightning-record-picker>

</template>

In the JavaScript file (recordPicker.js), handle the record selection event.

import { LightningElement, track } from 'lwc';

export default class RecordPicker extends LightningElement {
    @track selectedRecordId;
    objectApiName = 'Account'; // Specify the object API name

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

}











You can customize the lightning-record-picker component further by specifying different object API names, icons, labels, and sizes according to your requirements. This component provides a user-friendly way for users to search and select records within your Lightning Web Component.

The record picker component is a powerful tool that allows you to integrate it with your page seamlessly and offers various features to enhance user interaction and data retrieval. You can configure the default value, placeholder text, and error message per your requirements. However, that's not all! We've provided new ways to customize and control the record picker component, including: 

Matching Fields: By default, the object's Name field is matched, but you can override this and use any field with a text or text formula field type or even add a second field to use for matching.

Display Fields: We only display the Name field to start with, but we've found that users appreciate it when we add a secondary field to help them find the correct record, especially when there are plenty of similarly named records.

Filtering: The Record Picker component allows you to control how it filters records for your users. You can combine field types, operators, and custom logic with comprehensive support for SOQL-like operator wildcards.

Validation: The Record Picker component supports validation to ensure data integrity and user input. Validation messages can be displayed when the component loses focus or when you use the reportValidity() method. You can even set custom validation messages using setCustomValidity().

References

Record Picker Lightning Web Component library

Record Picker Hello LWC Component

Record Picker Dynamic Target LWC Component

Lightning Data Service

GraphQL Wire Adapter for LWC

Salesforce Developers’ Blog: Introducing the Lightning Record Picker Component






Comments

Popular posts from this blog

Introduction to Salesforce Agent Script: Build Predictable AI Agents

Anti-Patterns in Salesforce Agentforce: What to Avoid When Building AI Agents

MCP vs. Traditional APIs: Choosing the Right Integration Approach