How to Retrieve Field Picklist Values in Lightning Web Components

Lightning Web Components (LWC) provide a powerful framework for building dynamic and responsive user interfaces in Salesforce. One common requirement is to retrieve and display field picklist values based on various scenarios. In this article, we'll explore different approaches to accomplish this using LWC.

How to Get Picklist Values for a Specific Record

To dynamically retrieve Status picklist values according to the record type of the current case, you can create an LWC component and add it to any Case Lightning Experience (LEX) page.

HTML

<template>
    <lightning-card title="fsrk_PicklistValueFetcherRecordId" icon-name="standard:record_lookup">
        <div class="slds-p-around_small">
            <p lwc:if={recordId}>Record Id: {recordId}</p>
            <p lwc:if={subject}>Case Subject: {subject}</p>
            <div class="slds-text-title_caps slds-text-title_bold slds-p-top_medium">Statuses</div>
            <div class="slds-p-vertical_x-small">
                <template for:each={statuses} for:item="status">
                    <lightning-badge label={status.label} key={status.value} class="slds-m-vertical_xxx-small"></lightning-badge>
                </template>
            </div>
        </div>
    </lightning-card>
</template>

Controller

export default class FsrkPicklistValueFetcherRecordId extends LightningElement {
    @api recordId = '';
    recordTypeId = '';
    statuses = [];
    record = {};
    @wire(getRecord, { recordId: '$recordId', fields: ['Case.Subject'] })
    getRecord({ error, data }) {
        if (data) {
            this.record = data;
            this.recordTypeId = data.recordTypeId;
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining case record', error);
        }
    }
    get subject() {
        return this.record.fields?.Subject?.value;
    }
    @wire(getPicklistValues, {recordTypeId: "$recordTypeId", fieldApiName: CASE_STATUS_FIELD})
    getValues({ error, data }) {
        if (data) {
            this.statuses = data.values;
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining picklistValues', error);
        }
    }
}

This component uses the getRecord and getPicklistValues wires to fetch the necessary information and dynamically update the UI.

How to Fetch Picklist Values for a Default Record Type

If you want to retrieve picklist values for the default record type, you can modify the controller as follows:

export default class FsrkPicklistValueFetcherDefaultRt extends LightningElement {
    recordId = '';
    recordTypeId = '';
    statuses = [];
    subject = '';
    @wire(getObjectInfo, {objectApiName: CASE_SOBJECT})
    objInfo({error, data }) {
        if (data) {
            this.recordTypeId = data.defaultRecordTypeId;
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining objectInfo', error);
        }
    }
    @wire(getPicklistValues, {recordTypeId: "$recordTypeId", fieldApiName: CASE_STATUS_FIELD})
    getValues({ error, data }) {
        if (data) {
            this.statuses = data.values;
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining picklistValues', error);
        }
    }
}

This modification utilizes the getObjectInfo wire to obtain information about the Case object, including the default record type.

How to Fetch Picklist Values for a Given Record Type

To obtain picklist values for a specific record type, you can adjust the code as follows:

export default class FsrkPicklistValueFetcherGivenRt extends LightningElement {
    recordId = '';
    recordTypeId = '';
    statuses = [];
    subject = '';
    @wire(getObjectInfo, {objectApiName: CASE_SOBJECT})
    objInfo({error, data }) {
        if (data) {
            const recordTypeInfos = data.recordTypeInfos;
            this.recordTypeId = Object.keys(recordTypeInfos).find((rti) => {
                return recordTypeInfos[rti].name === "FSRK Customer Feedback";
            });
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining objectInfo', error);
        }
    }
    @wire(getPicklistValues, {recordTypeId: "$recordTypeId", fieldApiName: CASE_STATUS_FIELD})
    getValues({ error, data }) {
        if (data) {
            this.statuses = data.values;
        } else if (error) {
            console.error('¯\\_(ツ)_/¯ 💥💥💥 Error while obtaining picklistValues', error);
        }
    }
}

Conclusion

In this article, we've explored different strategies for retrieving field picklist values in Lightning Web Components. Whether it's for a specific record, the default record type, or a given record type, these examples provide a foundation for implementing dynamic picklist functionality in your Salesforce LEX pages. Feel free to adapt and enhance these code samples based on your specific use cases. Happy coding!

SalesForce Simplified