Create Dependent Picklist on Custom Object Using the Lightning Component and Apex Controller | how to Create Dependent Picklist and Controlling Picklist in salesforce

Today I am working on create dependent picklist on custom object using the lightning component and apex controller.

In the dependent picklist there are two dependent picklists. Where one is controlling field and another is dependent field.

It is a dynamic component function where need to pass object name, dependent and controlling field.

If we select the controlling picklist value then other side of dependent field value will be automatic display associated with controlling field value.

➡ To know more details about Dependent Picklist , Click Here.

LightningDependentPicklistCmp1.cmp [Lightning Component]

   <aura:component controller="LightningDependentPicklistCmpController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
	  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   
    <!-- aura attributes--> 
    <aura:attribute name="parentList" type="list" default="[]" description=""/>
    <aura:attribute name="childList" type="list" default="[]"/>
    <aura:attribute name="pickListMap" type="map"/>
    <aura:attribute name="disabledChildField" type="boolean" default="true"/>
    
    <aura:attribute name="objectName" type="string" default="NewStudent__c"/>
    <aura:attribute name="parentFieldAPI" type="string" default="State__c"/>
    <aura:attribute name="childFieldAPI" type="string" default="City__c"/>
    <aura:attribute name="parentFieldLabel" type="string" />
    <aura:attribute name="childFieldLabel" type="string"/>
    <aura:attribute name="parentValue" type="string" default=""/>
    <aura:attribute name="childValue" type="string" default=""/>
    
    
   <lightning:card title="Dependent Picklist Demo">
      <div class="slds-grid slds-wrap"> 
           <div class="slds-col slds-col_size-6-of-12">
                <!-- Controller Field -->
                <lightning:layoutItem size="12" padding="around-small">    
                    <lightning:select name="parentField" aura:id="parentField"
                                      value="{!v.parentValue}"
                                      label="{!v.parentFieldLabel}"
                                      onchange="{!c.changeFieldByParent}">
                        <aura:iteration items="{!v.parentList}" var="value">
                            <option value="{!value}">{!value}</option>
                        </aura:iteration>
                    </lightning:select>
                </lightning:layoutItem>
               </div> 
          
             <div class="slds-col slds-col_size-6-of-12">
                <!--Dependent Field-->
                <lightning:layoutItem size="12" padding="around-small">
                    <lightning:select name="childField"
                                      value="{!v.childValue}"
                                      label="{!v.childFieldLabel}"
                                      disabled="{!v.disabledChildField}">
                        <aura:iteration items="{!v.childList}" var="value">
                            <option value="{!value}">{!value}</option>
                        </aura:iteration>
                    </lightning:select>
                </lightning:layoutItem>
          </div>    
      </div>    
    </lightning:card> 
</aura:component>

LightningDependentPicklistCmp1Controller.js [JavaScript File]

    ({
	doInit : function(component, event, helper) {
        
		var action = component.get("c.getDependentPicklist");
        action.setParams({
            ObjectName : component.get("v.objectName"),
            parentField : component.get("v.parentFieldAPI"),
            childField : component.get("v.childFieldAPI")
        });
        
        action.setCallback(this, function(response){
         	var status = response.getState();
            if(status === "SUCCESS"){
                var pickListResponse = response.getReturnValue();
                
                //save response 
                component.set("v.pickListMap",pickListResponse.pickListMap);
                component.set("v.parentFieldLabel",pickListResponse.parentFieldLabel);
                component.set("v.childFieldLabel",pickListResponse.childFieldLabel);
                var pickListMap = component.get("v.pickListMap");
               // alert('pickListMap ' + JSON.stringify(pickListMap));
                
                // create a empty array for store parent picklist values 
                var parentkeys = []; // for store all map keys 
                var parentField = []; // for store parent picklist value to set on lightning:select. 
                
                // Iterate over map and store the key
                for (var pickKey in pickListResponse.pickListMap) {
                    parentkeys.push(pickKey);
                }
               // alert('parentkeys ' + parentkeys);
                //set the parent field value for lightning:select
                if (parentkeys != undefined && parentkeys.length > 0) {
                    parentField.push('--- None ---');
                }
                
                for (var i = 0; i < parentkeys.length; i++) {
                    parentField.push(parentkeys[i]);
                }  
                // set the parent picklist
                component.set("v.parentList", parentField);
                
            }
        });
        
        $A.enqueueAction(action);
	},
    
    changeFieldByParent : function(component, event, helper) {
    	var controllerValue = component.find("parentField").get("v.value");// We can also use event.getSource().get("v.value")
        var pickListMap = component.get("v.pickListMap");
         //alert('pickListMap ' + JSON.stringify(pickListMap));
        if (controllerValue != '--- None ---') {
             //get child picklist value
            var childValues = pickListMap[controllerValue];
            //alert('childValues ' + childValues);
            var childValueList = [];
            childValueList.push('--- None ---');
            for (var i = 0; i < childValues.length; i++) {
                childValueList.push(childValues[i]);
            }
            // set the child list
            component.set("v.childList", childValueList);
            
            if(childValues.length > 0){
                component.set("v.disabledChildField" , false);  
            }else{
                component.set("v.disabledChildField" , true); 
            }
            
        } else {
            component.set("v.childList", ['--- None ---']);
            component.set("v.disabledChildField" , true);
        }
	}
    
})

LightningDependentPicklistCmpController.apxc [Apex Controller]

   public with sharing class LightningDependentPicklistCmpController {
	private static final String base64Chars = '' +
        'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
        'abcdefghijklmnopqrstuvwxyz' +
        '0123456789+/';
    
    @AuraEnabled 
    public static PicklistWrapper getDependentPicklist(String ObjectName, string parentField, string childField) {
        Map<String,List<String>> pickListMap = new Map<String,List<String>>();
        PicklistWrapper pw = new PicklistWrapper();
        pw.pickListMap = pickListMap;
        
        if (Schema.getGlobalDescribe().get(ObjectName) ==null || String.isBlank(parentField) || String.isBlank(ChildField)){
            return pw;
        }
 
        Schema.sObjectType objType = Schema.getGlobalDescribe().get(ObjectName).newSObject().getSObjectType();
        Map<String, Schema.SObjectField> objFieldMap = objType.getDescribe().fields.getMap();
        
        if (!objFieldMap.containsKey(parentField) || !objFieldMap.containsKey(childField)){
            return pw;     
        }
        
        List<PicklistEntryWrapper> depEntriesList = (List<PicklistEntryWrapper>)JSON.deserialize(JSON.serialize(objFieldMap.get(ChildField).getDescribe().getPicklistValues()), List<PicklistEntryWrapper>.class);
        List<String> controllingValues = new List<String>();
        
        for (Schema.PicklistEntry ple : objFieldMap.get(parentField).getDescribe().getPicklistValues()) {
            pickListMap.put(ple.getLabel(), new List<String>());
            controllingValues.add(ple.getLabel());
        }
        
        for (PicklistEntryWrapper plew : depEntriesList) {
            String validForBits = base64ToBits(plew.validFor);
            for (Integer i = 0; i < validForBits.length(); i++) {
                String bit = validForBits.mid(i, 1);
                if (bit == '1') {
                    pickListMap.get(controllingValues.get(i)).add(plew.label);
                }
            }
        }
        
        pw.pickListMap = pickListMap;
        pw.parentFieldLabel = objFieldMap.get(parentField).getDescribe().getLabel();
        pw.childFieldLabel = objFieldMap.get(childField).getDescribe().getLabel();
        return pw;
    }
    
    
    public static String decimalToBinary(Integer val) {
        String bits = '';
        while (val > 0) {
            Integer remainder = Math.mod(val, 2);
            val = Integer.valueOf(Math.floor(val / 2));
            bits = String.valueOf(remainder) + bits;
        }
        return bits;
    }
    
    public static String base64ToBits(String validFor) {
        if (String.isEmpty(validFor)) return '';
        
        String validForBits = '';
        
        for (Integer i = 0; i < validFor.length(); i++) {
            String thisChar = validFor.mid(i, 1);
            Integer val = base64Chars.indexOf(thisChar);
            String bits = decimalToBinary(val).leftPad(6, '0');
            validForBits += bits;
        }
        
        return validForBits;
    }
    
    public class PicklistWrapper{
    	@AuraEnabled
        public Map<String, List<String>> pickListMap;
        @AuraEnabled
        public String parentFieldLabel;
        @AuraEnabled
        public String childFieldLabel;      
    }
        
    public class PicklistEntryWrapper{
        public String active;
        public String defaultValue;
        public String label;
        public String value;
        public String validFor;
        
    }
}

accountCreationControllerLwc.cls [Apex Controller File]

➡ To know more live demo source code in Salesforce lightning, Trigger, Visualforce & LWC, Use this link..