Get Picklist values in Lightning web components

Using getPicklistValues wire method to get any picklist field values in LWC without calling apex controller methods. 

get-picklist-values-lwc

Follow the below steps to get picklist values of any picklist field in LWC.

Step:1

Import getPicklistValues  wire method in your js file to get picklist values.

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

Step: 2

Import getObjectInfo wire method in your js file to get default record type id.

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

Step:3

Call getObjectInfo wire to get default recordtype id.

// to get the default record type id, if you dont' have any recordtypes then it will get master
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountMetadata;

Step:4

Now call getPicklistValues to get picklist values. It required two values. 

  1. recordTypeId: we have to pass recordtype id, if we dont' have record type then pass default record type id of master
  2. fieldApiName: It's API name of the picklist field. 
@wire(getPicklistValues,
        {
            recordTypeId: '$accountMetadata.data.defaultRecordTypeId', 
            fieldApiName: INDUSTRY_FIELD
        }
    )
    industryPicklist;

GetPicklistValuesOfField.html

<template>
    <lightning-card title="Get picklist values of Industry field" icon-name="standard:user">
        <div class="slds-m-around_medium">
            <template if:true={industryPicklist.data}>
                <lightning-combobox name="Industry" label="Industry" value={value}
                    options={industryPicklist.data.values} onchange={handleChange}>
                </lightning-combobox>
            </template>
            <p>Selected value is: {value}</p>
        </div>
    </lightning-card>
</template>

GetPicklistValuesOfField.js

import { LightningElement,wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';


export default class GetPicklistValuesOfField extends LightningElement {
    value ='';

    // to get the default record type id, if you dont' have any recordtypes then it will get master
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountMetadata;

    // now get the industry picklist values
    @wire(getPicklistValues,
        {
            recordTypeId: '$accountMetadata.data.defaultRecordTypeId', 
            fieldApiName: INDUSTRY_FIELD
        }
    )
    industryPicklist;

    // on select picklist value to show the selected value
    handleChange(event) {
        this.value = event.detail.value;
    }
}

GetPicklistValuesOfField.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo

Labels:
LWC
Join the conversation