Dynamic Picklist Value in Lightning Web Components

Today we will check how we can get Dynamic Picklist Value in Lightning Web Components without using Apex. We can use this component to get values for any picklist field. 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
Now we will check the code

showPicklistValue.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>

showPicklistValue.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;
    }
}

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.

DemoApp.cmp

<aura:application extends="force:slds">    
    <aura:attribute name="selectedValue" type="String" description="Picklist selected value" ></aura:attribute>
    <c:showPicklistValue objectName="Contact" fieldName="Level__c" value="{!v.selectedValue}"></c:showPicklistValue>
</aura:application>

This is how our final output will look like

 Check my post to start development on Lightning Web Components Open Source. 

So we can use this component to get Dynamic Picklist Value in Lightning Web Components (LWC).

Did you like this post or have any question. Let me know in comments. Happy Programming 🙂