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

    Published By: Venu Gutta
    Published on: Friday 28 August 2020
    A- A+

    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 LWC picklist values based on recordtype values

    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: LWC picklist values based on recordtype
  • 4 comments to ''LWC Combobox Picklist : Get Pick-list Values (With / Without Default Record Type Id)"

    ADD COMMENT
    1. Thanks for posting this. I wasn't finding this information elsewhere. Good examples and good explanation!

      ReplyDelete
    2. gracias por su ayuda y explicación, por favor, ¿puede ayudarme a explicar cómo obtener dos o tres listas de selección?

      ReplyDelete
      Replies
      1. you can use multiple lightning-combobox tags and get options from JS using wire. Change your fieldApi name at "fieldApiName: LeadSource"

        Delete
    3. Hi, Any solution if retrieving picklist values from the user object? As the User object dosnt have a master record the above dosnt appear to work.

      ReplyDelete