function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rohit Sharma 66Rohit Sharma 66 

Lightning component SObject dependent picklist

HI,

I have dependent picklist in SFDC custom object, and like to show these two picklist fields in Lightning component. For eg  like parent filed A and its child picklist filed B, Based on picklist values in A field the value in B changes.

Can anyone suggest how to implement this in Lightning component. I tried using UI:inputSelect, but its not working.
Amol Salve 13Amol Salve 13
Hello Rohit,

Try this code,
 
<aura:component implements="flexipage:availableForAllPageTypes" controller="DependentController" access="global">
	<aura:attribute name="Country" type="String" access="global"/>
	<aura:attribute name="State" type="String" access="global"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<aura:handler name="change" value="{!v.Country}" action="{!c.chanegState}"/>
	<ui:inputSelect aura:id="CountryId" label="Country" value="{!v.Country}"/>
	<ui:inputSelect aura:id="StateId" label="State" value="{!v.State}"/>
</aura:component>


({

    doInit : function(cmp) {        
        var action = cmp.get("c.countriesList");
        action.setCallback(this, function(response) {
            if(cmp.isValid() && response.getState() === "SUCCESS") {
                var options = response.getReturnValue();
                var picklistOptions = [];
                for (i= 0; i < options.length ; i++)
                {
                    picklistOptions[i] = { label: options[i].Label, value: options[i].Value};
                }
                cmp.find("CountryId").set("v.options", picklistOptions);
            }
        });
        $A.enqueueAction(action);
    },

    chanegState: function (cmp) {
        var countryvalue = cmp.get("v.Country");
        var action2 = cmp.get("c.showStates");
        action2.setParams({ "countryvalue" : countryvalue });
        action2.setCallback(this, function(response) {
            if(cmp.isValid() && response.getState() === "SUCCESS") {
                var options = response.getReturnValue();
                var picklistOptions = [];
                for (i= 0; i < options.length ; i++)
                {
                    picklistOptions[i] = { label: options[i].Label, value: options[i].Value};
                }
                cmp.find("StateId").set("v.options", picklistOptions);
            }
        });
        $A.enqueueAction(action2);
    }
})
public class DependentController{
public List<selectOption> countriesList() { 

            List<selectOption> countriesList = new List<selectOption>();
            countriesList.add(new selectOption(' ','--Select--'));

            map<string,Countries__c> countryMap = Countries__c.getAll();
            List<string> countries = new List<string>();
            countries.addAll(countryMap.keySet());
            countries.sort();

            for(string country : countries){

                Countries__c c = countryMap.get(country);
                countriesList.add(new selectOption(c.CountryCode__c, c.Name));
            }

            return countriesList; 
        }

  public List<selectOption> showStates() { 
		
		List<selectOption> statesList = new List<selectOption>(); 
		Map<String, States__c> allstates = States__c.getAll();
		Map<string, States__c> states = new Map<string, States__c>();
		for(States__c state : allstates.values()) { 
			if (state.countryCode__c == fanCountry_Region) { 
				states.put(state.name, state); 
			} 
		}
		 if(fanCountry_Region.contains('United States') || fanCountry_Region.contains('Canada ') ){
			
			statesList = new List<selectOption>();
		 }else{
			
			for (String stateName : stateNames) {
                States__c state = states.get(stateName);
                statesList.add(new SelectOption(state.StateCode__c, state.Name));
            }
		 }
		 return statesList;
    }
}

Thank you,
Amol Salve
Salesforce Developer
Mustafa JhabuawalaMustafa Jhabuawala
Rohit,

Can you share your code. So that I can figure it out where the issue is, in your code itself.

Logically you need to make a call to apex controller class to get the picklist data and then you need to bind that with your ui:inputSelect

You will get examples in the salesforce docs itself that how to call the apex controller method and to bind the data to ui:inputSelect.

You can refer the code provided by Amol, it will work.

What I suggest is to start doing by your own so that you will get familiar with the syntaxes.


Thanks,
Mustafa Jhabuawala
Technical Lead at Zen4orce (http://www.zen4orce.com)