Building dynamic record picker component in lwc


11/06/2024

 


 

The lightning-record-picker lets you search and choose Salesforce records. It uses a special search function to find matching records as you type and allows you to pick one.

This example shows how to use it to search for Contacts.

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                <lightning-record-picker object-api-name="Contact" label="Contacts" ></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';
 
export default class RecordPicker extends LightningElement { }
 

recordPicker.js-meta.js

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

 

Display the record suggestions:

Lightning record picker provides a "display-info" attribute to show the suggestions. This attribute take a reference of an object that specifies the main field and additional field to display.

here is syntax:

     displayInfo = {
         primaryField: 'FirstName',
         additionalFields: ['Account.Name']
     };
 

The primaryField is a string type field. This is first field which is display the FirstName of contacts object as suggestions. The default value is name. 

The additionalFields is an array type field. The value for additionalFields is an array with a single string element representing the additional field to display. Only the first element of the array is used.

 

Example:

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                <lightning-record-picker object-api-name="Contact" label="Search with 'display info'" display-info={displayInfo}></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';

export default class RecordPicker extends LightningElement {
 
     displayInfo = {
        primaryField: 'FirstName',
        additionalFields: ['Account.Name']
    };
 
}
 
 
Search by matching field:
 

Normally, the lightning-record-picker searches by record name. But you can change this! Tell it which fields to search in using the matching-info option. This even works for fields that connect different objects, like Account phone numbers.

This example searches by Name first, then Phone number.

 

The primaryField is object type field. This is use to query to search term. This support only text and formula(text) field. Object format must be:

{fieldPath: 'Name'}

The additionalFields is an array type field. In this field we can only specify the one field. This support only text and formula(text) field. This field format must be:

[ { fieldPath: 'Phone' } ]

 

Example:

 

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                  <lightning-record-picker object-api-name="Contact" label="Search with 'matching info'" matching-info={matchingInfo}></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';

export default class RecordPicker extends LightningElement {
 
     matchingInfo = {
        primaryField: { fieldPath: 'Name' },
        additionalFields: [{ fieldPath: 'Phone' }],
    };
}

 

Apply filter 

The lightning record picker provider filter attribute which writes in html tag <lightning-record-picker filter={} >. The value of "filter" attribute is object type with "criteria" property and the "criteria" property is an array type which contains three property is that fieldPath, operator, value and filterLogic property is optional . 

The filter object have criteria property for individual filters. We can combine these filter using logical operator( AND, OR,  NOT) specify with filterLogin property.

fieldPath: This property is required property which is string type. This contain the apiname of object fields like Name, Account.Phone etc.

operator: This property is required property which is string type. 

value: This property is required property which search that what kind of value you want search for example name which should be equal 'abcd'.

 

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                <lightning-record-picker object-api-name="Account" label="Search with 'filter'" filter={filter}></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';

export default class RecordPicker extends LightningElement {
 
      filter = {
        criteria: [
            {
                fieldPath: 'Website',
                operator: 'eq',
                value: 'http://www.uos.com', //This show only those records where website field value equal to 'http://www.uos.com'
            },
            {
                fieldPath: 'Name',
                operator: 'like',
                value: 'Test%', //This show only those records where Name field value start with Test
            },
        ],
        filterLogic: '1 OR 2' //This show only those record based on above 1 or 2 filter criteria conditions that either should be match with website value or should be match with name field value
      };
}

 

Filter on date type

To set dates and times, provide an object with either a "value" property (for absolute dates) or a "literal" property (for relative dates). Dates and times must be strings formatted according to the specific field type. The API will convert them to JavaScript dates and throw an error if the format is wrong.

FIELD TYPE FORMAT JS DATE CONVERSION
DateTime "2023-03-10T14:24:44.567Z" date.toISOString()
Date "2023-01-01" date.toISOString().slice(0, 10)
Time "14:29:50.659Z" date.toISOString().slice(11)

Instead of "literal," think of it as a "shortcut" for common date ranges. These shortcuts come from a list provided by the API. For example, use "TODAY" to only show results from today.

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                <lightning-record-picker object-api-name="Account" label="Search with 'filter by date'" filter={filter}></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';

export default class RecordPicker extends LightningElement {
 
      filter = {
        criteria: [
            {
                fieldPath: 'LastModifiedDate',
                operator: 'lt',
                value: { literal: 'TODAY' },
            },
        ],
      };
}

 

Add Events

The ligtning record provide events like change, error, focus, blur, ready. These event are usefull when you want to do something like get selected value and show custom error message when no record available.

  1. change event: This invoke when user has been selected record or cleared. This return the selected value Id otherwise null value if none.
  2. error event: This event invoke when Lighting Data Service return an error. The error event have paramter like error.message, error.output, error.errorCode. These are all string type. The error event properties are bubbles, cancelable, composed.
  3. focus event: This event invoke when the focus is set on lightning record picker input box. The focus event properties are bubbles, cancelable, composed.
  4. blur event: This event invoke when the focus is remove on lightning record picker input box. The focus event properties are bubbles, cancelable, composed.
  5. ready event: This event invoke when the component stop the loading and is rendered. The focus event properties are bubbles, cancelable, composed.

recordPicker.html

<template>
    <lightning-card>
            <div class="slds-m-around_small">
                <lightning-record-picker object-api-name="Account" label="Search with 'filter by date'" filter={filter} onchange={changeCustomEvent} ></lightning-record-picker>
            </div>
        </lightning-card>
</template>
 

recordPicker.js

import { LightningElement } from 'lwc';

export default class RecordPicker extends LightningElement {
 
      filter = {
        criteria: [
            {
                fieldPath: 'Website',
                operator: 'eq',
                value: 'http://www.uos.com',
            },
            {
                fieldPath: 'Name',
                operator: 'like',
                value: 'Test%', 
            },
        ],
        filterLogic: '1 OR 2' 
      };
 
      changeCustomEvent(event) {
        console.log(event.detail.recordId);
      }
 
}

 

Usage Considerations

Matching vs. Displaying: The record picker might show different fields than it uses for searching. This can be confusing, so make sure the search fields you set also appear when a record is chosen.

Search Wildcards: Don't worry about using special characters like "%" or "_" in your search terms, the component handles them automatically.

Picking a Good Field: Choose a field that's always filled in (marked as "required") to avoid showing a blank selection.