[Salesforce] LWC : lightning-record-picker 마스터가 될래요!

안녕하셀포 ~😉🌺

 

Salesforce Spring'24 Release Note  여러분 모두 확인하셨나요!?

이번에는 새로 Release된 여러 기능중 lightning-record-picker에 대해 다뤄보겠습니다.

---

Lightning-record-picker를 이용하여 간단하게 Lookup 컴포넌트를 만들 수 있습니다.

물론 필터, 보여지는 필드 등 커스터마이징도 가능합니다!

(이번 릴리즈 중 제가 제일 좋아하는 부분입니다😎)

참고 : https://developer.salesforce.com/docs/component-library/bundle/lightning-record-picker/documentation

lightning-record-picker - documentation - Salesforce Lightning Component Library

 

Attributes 들을 먼저 살펴보자면, 

• Filter
  • 검색 시 필터 커스터마이징 가능

filter = {
    criteria: [
        {
            fieldPath: 'Website',
            operator: 'eq',
            value: 'https://www.grenoble.fr',
        },
        {
            fieldPath: 'Website',
            operator: 'eq',
            value: null,
        },
        {
            fieldPath: 'Type',
            operator: 'ne',
            value: 'Partner',
        },
        {
            fieldPath: 'Parent.Name',
            operator: 'like',
            value: 'Acme%',
        },
    ],
    filterLogic: '(1 OR 2) AND NOT(4) AND 3',
};

• DisplayInfo
  • 검색 시, 화면에 보여지는 부가적인 필드 설정 가능
  • primaryField 를 따로 설정하지 않으면 default 값은 Name 필드가 됩니다.
  • additionalFields 는 단일 문자열 필드로, 아무리 여러값을 입력해도 첫번째 요소만 화면에 보여집니다.

displayInfo = {
    primaryField: 'Account.Name',
    additionalFields: ['Title', 'Rating']  //이경우, Title만 화면에 보여짐
};

• MatchingInfo
  • 기본적으로 검색시, 대상 오브젝트의 Name 필드를 기준으로 검색됩니다.
  • 다른필드 또는 추가 필드와 일치하는 항목을 찾고싶을때 matchingInfo 속성을 지정해줍니다.

matchingInfo = {
    primaryField: { fieldPath: 'Name' },
    additionalFields: [{ fieldPath: 'Phone' }],
};

• Custom Events
  • onChange 등의 Event
• Validation 
  • setCustomValidity() 메소드를 사용하여 Custom Message를 작성 가능합니다.
    
    

---

위에서 설명드린 Attributes들을 사용하여 LWC를 만들었습니다.

더 자세한건 제가 만든 예시를 통해 확인바랍니다. (●ˇ∀ˇ●)

 

[Resources]

 

drawLwc.html

<!-- Draw Lwc -->
<template>
    <lightning-layout>
        <lightning-layout-item size="4">
            <lightning-record-picker
                    label="Select Account"
                    object-api-name="Account"
                    placeholder="Search.."
                    filter={filter}
                    display-info={displayInfo}
                    matching-info={matchingInfo}
                    onchange={handleChange}>
            </lightning-record-picker>

            <div style="padding-top:10px;">
                <lightning-button onclick={handleSubmit} label="Submit" ></lightning-button>
            </div>

            <template lwc:if={selectedAccountId}>
                <div style="padding-top:10px;">
                    <h2>Selected Account Name : {accountName}</h2>
                    <h2>Selected Account Type : {accountType}</h2>
                    <h2>Selected Account rating : {accountRating}</h2>
                </div>
            </template>
        </lightning-layout-item>
    </lightning-layout>
</template>

 

drawLWC.js

import { LightningElement, wire, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_TYPE from '@salesforce/schema/Account.Type';
import ACCOUNT_RATING from '@salesforce/schema/Account.Rating';
const filterData = {
    criteria: [
        {
            fieldPath: 'Rating',
            operator: 'ne',
            value: null
        }
    ]
}
export default class DrawLwc extends LightningElement {

    filter = filterData;
    selectedAccountId;

    //selectedAccountId에 값이 있을때 @wire 실행
    @wire(getRecord, {recordId: '$selectedAccountId', fields: [ACCOUNT_TYPE, ACCOUNT_RATING, ACCOUNT_NAME]})
    accountRecord;

    get accountName(){
        return getFieldValue(this.accountRecord.data, ACCOUNT_NAME);
    }

    get accountType(){
        return getFieldValue(this.accountRecord.data, ACCOUNT_TYPE);
    }

    get accountRating(){
        return getFieldValue(this.accountRecord.data, ACCOUNT_RATING);
    }

    // 보여지는 부가적인 필드들
    displayInfo = {
        primaryField: 'Name',
        additionalFields: ['Rating'],
    };

    // 검색할 대상 필드들
    matchingInfo = {
        primaryField: { fieldPath: "Name" },
        additionalFields: [{ fieldPath: "Rating" }],
    };

    //선택한 레코드 Id 값 가져오기
    handleChange(event){
        console.log('handleChange event.detail', event.detail);
        this.selectedAccountId = event.detail.recordId;
    }

    //Submit Button Click 시
    handleSubmit() {
        // Check if an account is selected
        if (!this.selectedAccountId) {
            const errorMsg = 'Please select an account.';
            this.handleValidation(errorMsg);
        }else{
            //reset Validation
            this.handleValidation('');
        }
    }

    //Set Custom Error Message
    handleValidation(errorMessage) {
        const inputField = this.template.querySelector('lightning-record-picker');
        inputField.setCustomValidity(errorMessage); // Set custom error message
        inputField.reportValidity(); // Show error message to the user
    }

}

 

[Data]

	Id	Name	Rating	Type
Account	0018b00002QLdHJAA1	Edge Communications	Hot	Customer - Direct
Account	0018b00002QLdHKAA1	Burlington Textiles Corp of America	Warm	Customer - Direct
Account	0018b00002QLdHNAA1	Grand Hotels & Resorts Ltd	Warm	Customer - Direct
Account	0018b00002QLdHOAA1	United Oil & Gas Corp.	Hot	Customer - Direct
Account	0018b00002QLdHPAA1	Express Logistics and Transport	Cold	Customer - Channel
Account	0018b00002QLdHQAA1	University of Arizona	Warm	Customer - Direct

 

[Result]

검색시 !!

DisplayInfo로 설정해준 Name, Rating 필드가 함께 나오며,

MatchinInfo로 설정해준 Name과 Rating으로 검색 가능한걸 확인할 수 있습니다.

 

setCustomValidity(), reportValidity() 메소드를 사용하여 선택한 레코드가 없을 때,

'Please select an account.' Custom Message가 나오는걸 확인 할 수 있습니다.

 

다음엔 더 유용한 정보로 돌아오겠습니다!

 

좋은 하루 보내셀포 ~✨💕