Salesforce Lightning Web Component Record Picker

Salesforce Lightning Web Component Record Picker

lightning-record-picker can be used in Salesforce Lightning Web Component for record selection.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-var-p-around_medium">
            <lightning-record-picker
                label="Accounts"
                placeholder="Search Accounts"
                object-api-name="Account"
                onchange={handleChange}>
            </lightning-record-picker>
            <template if:true={selectedAccountId}>
                Selected Account Id is {selectedAccountId}
            </template>
        </div>
    </lightning-card>
</template>

JavaScript:

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

    selectedAccountId;

    handleChange( event ) {

        console.log(
            'Selected Account Id is',
            event.detail.recordId
        );
        this.selectedAccountId = event.detail.recordId;

    }

}

js-meta.xml:

<?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__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply