LWC Combobox Picklist : Get Pick-list Values (With / Without Default Record Type Id)

Fetching and Displaying Picklist Values In Lightning Web Components (LWC) : 

By using "lightning-combobox" tag we can display picklist values in Lwc markp. In Lightning Aura Components if we want to display picklist values, we need to hit  apex server and needs write logic to fetch picklist values by using dynamic schema. Even though we are write apex logic, we could not get picklist values based on recordtype name or recordTypeId, every time it shows all the values irrespective of record type. But in lightning web components we have a great privilege that don't need to hit apex for fetching picklist values. In Lwc we can get values based on recordtype name as well.

By importing getPicklistValues or getPicklistValuesByRecordType from "lightning/uiObjectInfoApi" we can get picklist values in LWC JavaScript. recordTypeId is required parameter for both of these functions.

Get picklist values based on recordtypeId In Salesforce LWC component

lwcPicklistWithRecordtype.js

import { LightningElement,wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import STAGE from '@salesforce/schema/Opportunity.StageName';

export default class LwcPicklistWithRecordtype extends LightningElement {
    @wire(getPicklistValues,
        {
            recordTypeId: '01228000000XckuAAC', //pass id dynamically
            fieldApiName: STAGE
        }
    )
    stageValues;
}

lwcPicklistWithRecordtype.html

<template>
    <div class="slds-box">
        <template if:true={stageValues.data}>
            <lightning-combobox name="progress" label="Opportunity Stage" value={value} 
                options={stageValues.data.values} onchange={handleChange}>
            </lightning-combobox>
        </template>
    </div>
</template>

Output

Get picklist values if we don't have recordtypes in Object In Lightning Web Components (LWC)

If  object does not have record type's then use the defaultRecordTypeId property, this can be fetch from  getRecordUi or getObjectInfo. See below example.

lwcPicklistWithoutRecordtype.js

import { LightningElement,wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import LeadSource from '@salesforce/schema/Contact.LeadSource';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class LwcPicklistWithoutRecordtypeextends LightningElement {
    @wire(getObjectInfo, { objectApiName: CONTACT_OBJECT })
    contactInfo;

    @wire(getPicklistValues,
        {
            recordTypeId: '$contactInfo.data.defaultRecordTypeId',
            fieldApiName: LeadSource
        }
    )
    leadSourceValues;
}

lwcPicklistWithoutRecordtype.html

<template>
    <div class="slds-box">
        <template if:true={leadSourceValues.data}>
            <lightning-combobox name="progress" label="Lead Source" value={value}
                options={leadSourceValues.data.values} onchange={handleChange}>
            </lightning-combobox>
        </template>
    </div>
</template>

Outut:

Subjects:

dynamic combobox in lwc lightning-combobox lwc example LWC LWC Combobox lwc combobox default value lwc combobox dynamic values lwc combobox event LWC Pick-List onchange combobox lwc

Share This: