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.
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 InfodefaultRecordTypeId
property, which is returned fromgetObjectInfo
orgetRecordUi
.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’sdata
property orerror
property. If a function is decorated with@wire
, the results are returned in an object with adata
property and anerror
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>