Lightning Record Picker with Dynamic Targets in Salesforce | Lightning Web Components

Kapil November 19, 2023

 In this blog we will learn about new Lightning Record Picker component. It was recently introduced by Salesforce in its Winter '24 release.

It's kind of a custom lookup component which can be customized and used in your custom lightning web components or apps.

If you are one of those developers who likes to tailor the user experience as per requirement then this component is for you guys. This is not just a component I would say it's a complete bundle of lookup functionalities which can be customized as per requirement.

You can have below configurations in it - 

Matching fields: By default, we match an object’s Name field, but you can override this and use any field with a text or text formula field type, or you can even add a second field to use for matching.

Display fields: Similarly, we only display the Name field to start with, but we’ve found that users love it when we add a secondary field to help them find the right record (especially when there are a lot of similarly named records).

Filtering: You’ve got a whole lot of power and control over how the Record Picker filters records for your users, with comprehensive support for field types, operators, and custom logic to combine them. There’s also SOQL-like operator wildcards support.

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 also set custom validation messages using setCustomValidity().



Example 1 - Lightning Record Picker Static Targets with Filter

lightningRecordPickerStatic.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <lightning-card
        title="RecordPicker Static"
        class="slds-card__body_inner"
        icon-name="standard:search"
    >
        <div>
            <lightning-record-picker
                lwc:ref="recordPicker"
                object-api-name="Contact"
                placeholder="Search..."
                label="Select a record"
                matching-info={matchingInfo}
                display-info={displayInfo}
                filter={filter}
                onchange={handleChange}
            >
            </lightning-record-picker>
        </div>
    </lightning-card>
</template>


lightningRecordPickerStatic.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { LightningElement } from 'lwc';

export default class LightningRecordPickerStatic extends LightningElement {
    selectedRecordId = '';

    matchingInfo = {
        primaryField: { fieldPath: "Name" },
        additionalFields: [{ fieldPath: "Title" }],
    };
    displayInfo = {
        additionalFields: ["Title"],
    };

    filter = {
        criteria: [
            {
                fieldPath: "Account.Name",
                operator: "like",
                value: "Kapil%",
            },
        ],
    };
    handleChange(event) {
        this.selectedRecordId = event.detail.recordId;
        console.log("🚀 ~ this.selectedRecordId:", this.selectedRecordId);
    }
}


Example 2 - Lightning Record Picker with Dynamic Targets

lightningRecordPickerDynamic.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
    <lightning-card
        title="RecordPicker Dynamic Target"
        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
                    lwc:ref="recordPicker"
                    object-api-name={selectedTarget}
                    placeholder="Search..."
                    label="Select a record"
                    variant="label-hidden"
                    display-info={displayInfo}
                    matching-info={matchingInfo}
                    onchange={handleRecordSelect}
                    class="slds-size_full slds-combobox-addon_end"
                >
                </lightning-record-picker>
            </div>
        </div>

    </lightning-card>
</template>


lightningRecordPickerDynamic.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { LightningElement } from 'lwc';

export default class lightningRecordPickerDynamic extends LightningElement {
    targetObjects = [

      {
            label: 'Account',
            value: 'Account'
        },
        {
            label: 'Contact',
            value: 'Contact'
        }
    ];
    selectedTarget = 'Account';
    currentSelectedRecordId = null;

    displayInfos = {
        Account: {
            additionalFields: ['Type']
        },
        Contact: {
            additionalFields: ['Phone']
        }
    };

    matchingInfos = {
        Account: {
            additionalFields: [{ fieldPath: 'Type' }]
        },
        Contact: {
            additionalFields: [{ fieldPath: 'Phone' }]
        }
    };

    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;
        console.log("🚀 ~ this.currentSelectedRecordId:", this.currentSelectedRecordId);
    }
}


Output



Checkout Complete Video Tutorial Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

1 Comments

  1. Maulik VadodariyaFebruary 10, 2024 at 9:24 AM

    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 ?

    ReplyDelete