Picklist value in LWC

Picklist value in LWC

In this example, we will display and capture the selected value from picklist field from any object.

picklistValue.js

import { LightningElement, wire} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

//  Object and field API Name  //
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import OBJECT_NAME from '@salesforce/schema/Account';
// ****** END *****************// 

export default class picklistValues extends LightningElement {

    @wire(getObjectInfo, {objectApiName : OBJECT_NAME})
    objectInfo;

    @wire(getPicklistValues, {
            recordTypeId: '$objectInfo.data.defaultRecordTypeId', 
            fieldApiName : TYPE_FIELD})  picklistValues;
    
    handleComboboxChange(event) { 
        alert('Value - '+event.detail.value);
    }
}

Note that we have used the default record type Id, you can use accordingly.

picklistValue.html

<template>
        <lightning-card>
            <template if:true={picklistValues.data}>
                
                <div class="slds-m-around_medium">
                        <lightning-combobox
                            value={picklistValues.data.values}
                            options={picklistValues.data.values}
                            placeholder="Select an Option"
                            label="Type"
                            onchange={handleComboboxChange}
                            ></lightning-combobox>
							
                </div>
            </template>
        </lightning-card>
</template>

picklistValues.js-meta.xml

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

Final output: 

(Visited 2,369 times, 3 visits today)

Leave a Reply