Sunday, March 10, 2019

How to fetch Picklist values in Lightning Web Components(lwc)

This post explains how to fetch picklist values in Lightning web components(lwc)

use getPicklistValues wire adapter to fetch picklist values for a specified field.

Parameters:

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.

Demo:
PicklistValuesDemo.html
<template>
    <lightning-card title="Account PicklistValues">
        <template if:true={IndustryPicklistValues.data}>
            <lightning-combobox name="progress"
                                label="Industry"
                                value={value}
                                placeholder="-Select-"
                                options={IndustryPicklistValues.data.values}
                                onchange={handleChange} >
            </lightning-combobox>
      </template><br/>
      you selected industry: <b>{value}</b><br/><br/>
      <template if:true={IndustryPicklistValues.data}>
        Account Type: <br/>
        <template for:each={TypePicklistValues.data.values} for:item="item">
            <lightning-input
                placeholder="Account Type"
                key={item.value}
                label={item.label}
                data-value={item.value}
                type="checkbox"></lightning-input>
        </template>
    </template>
    </lightning-card>
</template>

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

export default class PicklistValuesDemo extends LightningElement {
    @track value;

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

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    TypePicklistValues;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: INDUSTRY_FIELD})
    IndustryPicklistValues;

    handleChange(event) {
        this.value = event.detail.value;
    }
}

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

Result


Resource
getPicklistvalues

2 comments: