Dependent Picklist in Lightning Web Component

Hi friends, In this post i will show you an example that has implementation of dependent picklist through lightning web component. So let's get started.

Dependent picklist in lightning web component

In this example I used contact object that contains two picklists "Level" and "Secondary Level".  "Secondary Level" picklist field is dependent on "Level" picklist field. We can retrieve picklist value and dependent values associated with a record type using the lightning/uiObjectInfoApi that requires two parameters sObjectApiName and RecordTypeId

Note: Make sure field dependency is created on object level for the picklists before implementing this example.

DependentPicklistLWC.html

 <template>
    <div class=" slds-card">
        <div class="slds-grid slds-gutters slds-p-top_small slds-p-bottom_large slds-wrap">
            <div class="slds-col slds-size_4-of-12">
            </div>
            <div class="slds-col slds-size_4-of-12">
                <lightning-combobox name="Level" label="Level" placeholder="Select Level" options={levelValues} required
                                    onchange={handleLevelChange} value={selectedLevelValue}>
                </lightning-combobox>
            </div>
            <div class="slds-col slds-size_4-of-12">
            </div>
            <div class="slds-col slds-size_4-of-12">
            </div>
            <div class="slds-col slds-size_4-of-12">
                <lightning-combobox name="Secondary Level" label="Secondary Level" placeholder="Select Secondary Level"
                                    options={secondaryLevelValues} required onchange={handleSecondaryLevelChange} value={selectedSecondaryLevelValue}>
                </lightning-combobox>
            </div>
            <div class="slds-col slds-size_4-of-12">
            </div>
        </div>
    </div>
 </template>

DependentPicklistLWC.js

 import { LightningElement, wire } from 'lwc';
 import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
 export default class DependentPicklistLWC extends LightningElement {
    levelValues;
    secondaryLevelValues;
    selectedLevelValue = '';
    picklistValuesObj;
    selectedSecondaryLevelValue = '';
    // method to get master and dependent Picklist values based on record type
    @wire(getPicklistValuesByRecordType, { objectApiName: 'Contact', recordTypeId: '0120o000000BKUO' })
    newPicklistValues({ error, data }) {
        if (data) {
            this.error = null;
            this.picklistValuesObj = data.picklistFieldValues;
            console.log('data returned' + JSON.stringify(data.picklistFieldValues));
            let levelValueslist = data.picklistFieldValues.Level__c.values;
            let levelValues = [];
            for (let i = 0; i < levelValueslist.length; i++) {
                levelValues.push({
                    label: levelValueslist[i].label,
                    value: levelValueslist[i].value
                });
            }
            this.levelValues = levelValues;
            console.log('Level values' + JSON.stringify(this.levelValues));
        }
        else if (error) {
            this.error = JSON.stringify(error);
            console.log(JSON.stringify(error));
        }
    }

    handleLevelChange(event) {
        this.selectedLevelValue = event.detail.value;        
        if (this.selectedLevelValue) {
            let data = this.picklistValuesObj;
            let totalSecondaryLevelValues = data.Secondary_Level__c;
            //Getting the index of the controlling value as the single value can be dependant on multiple controller value
            let controllerValueIndex = totalSecondaryLevelValues.controllerValues[this.selectedLevelValue];
            let secondaryLevelPicklistValues = data.Secondary_Level__c.values;
            let secondaryLevelPicklists = [];            
            secondaryLevelPicklistValues.forEach(key => {
                for (let i = 0; i < key.validFor.length; i++) {
                    if (controllerValueIndex == key.validFor[i]) {
                        secondaryLevelPicklists.push({
                            label: key.label,
                            value: key.value
                        });
                    }
                }
            })
            console.log('SecondaryLevelPicklists ' + JSON.stringify(secondaryLevelPicklists));
            if (secondaryLevelPicklists && secondaryLevelPicklists.length > 0) {
                this.secondaryLevelValues = secondaryLevelPicklists;
            }
        }
    }
    
    handleSecondaryLevelChange(event) {
        this.selectedSecondaryLevelValue = event.detail.value;
    }
 }

DependentPicklistLWC.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordAction</target>
	</targets>
 </LightningComponentBundle>

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.