Dynamic Picklist Value in Lightning Web Components

Hello Friends,

we are going to disscuss now,how to use Dynamic Picklist Value in Lightning Web Components with out Apex code.We are using attribute to pass the object and Field name and then the component will display available values. It also filter values based on Record Type.

Here we have used getPicklistValues, getObjectInfo from 'lightning/uiObjectInfoApi' using these we get the object info and picklist details

getObjectInfo provide us details related to Object and Field Metadata. We have used defaultRecordTypeId to get the default value for RecordType.
getPicklistValues supports two required parameter first RecordTypeId and second picklist field name.

Samle Code:

showMyPicklistValue.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Display Dynamic Picklist in Lightning Web Components
        </h3>
        <div slot="footer">

        </div>
        <lightning-combobox name={fieldLabel} label={fieldLabel} value={value} placeholder={fieldLabel}
            options={options} onchange={handleChange}></lightning-combobox>

        <p>Selected value is: {value}</p>
    </lightning-card>
</template>

showMyPicklistValue.js

import { LightningElement, wire, api, track } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class ShowPicklistValue extends LightningElement {

    @api objectName = 'Account';
    @api fieldName = 'Industry';
    @track fieldLabel;
    @api recordTypeId;
    @api value;
    @track options;
    apiFieldName;

    @wire(getObjectInfo, { objectApiName: '$objectName' })
    getObjectData({ error, data }) {
        if (data) {
            if (this.recordTypeId == null)
                this.recordTypeId = data.defaultRecordTypeId;
            this.apiFieldName = this.objectName + '.' + this.fieldName;
            this.fieldLabel = data.fields[this.fieldName].label;
            
        } else if (error) {
            // Handle error
            console.log('==============Error  ');
            console.log(error);
        }
    }
    @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: '$apiFieldName' })
    getPicklistValues({ error, data }) {
        if (data) {
            // Map picklist values
            this.options = data.values.map(plValue => {
                return {
                    label: plValue.label,
                    value: plValue.value
                };
            });

        } else if (error) {
            // Handle error
            console.log('==============Error  ' + error);
            console.log(error);
        }
    }

    handleChange(event) {
        this.value = event.detail.value;
    }
}          

OutPut:-



Related Document:-
1)https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_lightning_ui_api_object_info
2)https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_picklist_values