Dynamically Fetch Picklist Values Based On Record Type In Salesforce LWC

Hey guys, today in this post we are going to learn that how we can display picklist values based on record type in salesforce lightning web component. It’s has been always a challenging part to display picklist values based on record types in aura components. But now in LWC, with the help of ‘getPicklistValuesByRecordType‘ and ‘getObjectInfo‘ imported functions , we can easily display it.

So let’s start with HTML file of our LWC component.

Step 1 : LWC HTML file [FetchPicklistFromLDS.html]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<template>   <!-- Account Record type Picklist -->   <label class="slds-form-element__label" for="recordType">Select Record Type</label>   <div class="slds-form-element__control">     <div class="slds-select_container">       <select class="slds-select" id="recordType" onchange={onValueSelection}>         <option value="">---None---</option>         <!--iterate all picklist values from lstRecordTypes property using for:each loop-->         <template for:each={lstRecordTypes} for:item="RT">           <option key={RT.value} value={RT.value}>{RT.label}</option>         </template>       </select>     </div>   </div>   <!-- Opportunity Rating picklist -->   <label class="slds-form-element__label" for="Rating">Rating</label>   <div class="slds-form-element__control">     <div class="slds-select_container">       <select class="slds-select" id="Rating">         <option value="">---None---</option>         <!--iterate all picklist values from lstRatings property using for:each loop-->         <template for:each={lstRatings} for:item="rating">           <option key={rating.value} value={rating.value}>{rating.label}</option>         </template>       </select>     </div>   </div> </template>

LWC JavaScript file [FetchPicklistFromLDS.js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

/* eslint-disable guard-for-in */ /* eslint-disable no-console */ import { LightningElement, wire, track } from 'lwc'; import { getObjectInfo, getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; export default class FetchPicklistFromLDS extends LightningElement {     @track lstRecordTypes; // to store account record type list     @track lstRatings;     // to store Rating field values (picklist)     recordTypeId = '';     // property to store selected Record Type Id     // get Account Object All Information from 'getObjectInfo' imported library     @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })     wireAccount({ data, error }) {         if (data) {             let getData = data;             let tempRecordTypes = [];             // run a for-in loop and process all account record types             for (let obj in getData.recordTypeInfos) {                 if (!getData.recordTypeInfos[obj].master) { // skip master record type                     // create picklist values in object formate with label and value                     let oRecType = {                         'label': getData.recordTypeInfos[obj].name,                         'value': getData.recordTypeInfos[obj].recordTypeId                     };                     tempRecordTypes.push(oRecType);                 }             }             // set lstRecordTypes property with record type list                 this.lstRecordTypes = tempRecordTypes;         }         else if (error) {             console.log("Error Occured ---> " + error);         }     }     // fetch account object all picklist fields based on recordTypeId     @wire(getPicklistValuesByRecordType, {         objectApiName: ACCOUNT_OBJECT,         recordTypeId: '$recordTypeId'     })     wiredRecordTypeInfo({ data, error }) {         if (data) {             // set lstRatings property with Rating field Picklist values from returned data             this.lstRatings = data.picklistFieldValues.Rating.values;         }         else if (error) {             console.log("field Error Occured ---> " + JSON.stringify(error));         }     }     // update recordType Id variable/property on record Type picklist change     onValueSelection(event) {         let recTypeId = event.target.value;         if (recTypeId === '') {             this.lstRatings = [];         }         this.recordTypeId = recTypeId;     } }

• Picklist values are scoped to a record type. getPicklistValuesByRecordType function returns a collection of picklist values for all the picklists of a specified record type. For more information, see Build UI for Picklists.
• We are using ‘lightning/uiObjectInfoApi’ funtion to get object metadata, and get picklist values.
• Check code comments.

LWC meta XML file [FetchPicklistFromLDS.js-meta.xml]

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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