Lesson: 39 Fetching and Displaying Picklist Values for a Single Field

Notes

HTML

<template>
    <lightning-card title="Demo of Picklist Values by Record Type">
        <div class="slds-var-p-around_medium">
            <template if:true={ratingOptions}>
                <lightning-combobox
                    name="rating"
                    label="Rating"
                    value={selectedRating}
                    placeholder="Select Rating"
                    options={ratingOptions}
                    onchange={handleSelectionChange}>
                </lightning-combobox>
                <p>Selected Rating: {selectedRating}</p>
            </template>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, wire } from 'lwc';
import { getPicklistValuesByRecordType, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class PicklistValueHandler extends LightningElement {
    ratingOptions; // Holds the options for the Rating picklist
    selectedRating; // Holds the selected Rating value

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo; // Fetches metadata for the Account object

    @wire(getPicklistValuesByRecordType, {
        objectApiName: ACCOUNT_OBJECT,
        recordTypeId: '$objectInfo.data.defaultRecordTypeId'
    })
    handlePicklistData({ data, error }) {
        if (data) {
            console.log(data);
            // Fetch only the Rating picklist options
            this.ratingOptions = this.generatePicklistOptions(data.picklistFieldValues.Rating);
        }
        if (error) {
            console.error(error);
        }
    }

    generatePicklistOptions(data) {
        return data.values.map(item => ({ "label": item.label, "value": item.value }));
    }

    handleSelectionChange(event) {
        const { name, value } = event.target;

        if (name === 'rating') {
            this.selectedRating = value;
        }
    }
}