Usage Of getPicklistValues wire adapter

Let us discuss here how to use the getPicklistValues wire adapter to get the picklist values for a specific field. Here is the sample code that explains how to use the getPicklistValues values.

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

export default class Example extends LightningElement {
    @wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD })
    propertyOrFunction;
}

 

  • recordTypeId—(Required) The ID of the record type. Use the Object Info defaultRecordTypeId property, which is returned from getObjectInfo or getRecordUi.
  • fieldApiName—(Required) The API name of the picklist field on a supported object.
  • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.

 

 Create Lightning web component

create a lightning web component using the following SFDX command. In this component, we will be showing the picklist values as a checkbox and as a dropdown using select

sfdx force:lightning:component:create --type lwc -n picklistvalues -d force-app/main/default/lwc

 

here is the picklistvalues.html  code

<template>
    <lightning-card title="Pick List Values as Checkbox" icon-name="custom:custom57">
        <template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">
                <template for:each={picklistValues.data.values} for:item="item">
                    <lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>
                </template>
            </div>
        </template>
    </lightning-card>
    <lightning-card title="Select List " icon-name="custom:custom19">
        <template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">

                <select>
                    <template for:each={picklistValues.data.values} for:item="item">
                        <option key={item.value}>{item.label}</option>
                    </template>
                </select>
            </div>
        </template>
    </lightning-card>
</template>

here is the picklistvalues.js code

import {
    LightningElement,
    wire
} from 'lwc';
import {
    getPicklistValues
} from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';


export default class Picklistvalues extends LightningElement {
    @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: TYPE_FIELD,
    })
    picklistValues;
}

here is the picklistvalues.js-meta.xml code

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

 

 Push changes to scratch org

Push changes to scratch using this command and add this component to record page using lighting app builder

And you can able to see the output as shown below.

 

 

 

Understand the Code

The following code will return the picklist values as a JavaScript object.

 

 @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: TYPE_FIELD,
    })
    picklistValues;

The following code will show the picklist values as an input checkboxes

<template if:true={picklistValues.data}>
            <div class="slds-m-around_medium">
                <template for:each={picklistValues.data.values} for:item="item">
                    <lightning-input key={item.value} label={item.label} data-value={item.value} type="checkbox"></lightning-input>
                </template>
            </div>
        </template>

The following code will show the values as a select list

 <select>
                    <template for:each={picklistValues.data.values} for:item="item">
                        <option key={item.value}>{item.label}</option>
                    </template>
                </select>