Displaying Dependent Picklist Fields on a Visualforce Page using Custom Object

Dependent picklists in Salesforce are very useful. They are used to limit the list of values in one picklist based on the value of another picklist. An example would be if you had a list of countries, states/provinces and major cities. If you select a country you would want the list of states/provinces to be filtered in the next picklist. The state/province selected should then limit the major cities that would be available for selection.

Displaying dependent picklists is very simple with a Visualforce pageblockTable. Let’s assume that we have a custom object called locations with three custom fields called country__c, state__c and city__c. When the custom object is viewed the ‘Controlling Field’ column for state will be country and for city it will be state. If you go into the custom field for country or state you will see a ‘Field Dependencies’ section that will show the custom field that is being controlled by the values in this picklist. If the ‘edit’ link is clicked the dependent values can be managed by selecting values and click on the ‘Include Values’ or ‘Exclude Values’ buttons. Now that our dependent picklists are setup we can create our table by simply referencing those fields in the pageblockTable tag.

Apex Class:

public with sharing class locationController{

public list<location__c> locationList{get;set;}

public locationController(){

locationList = [Select ID, Country__c, State__c, City__c

From Location__c];

}

}




Visualforce Page:




<apex:page Controller="locationController"> Location Table <apex:messages style="color: red;">

</apex:messages> 

<apex:form> 

<apex:pageblock

<apex:pageblocktable var="locItem" value="{!locationList}">

<apex:column headerValue="Country">

<apex:inputfield value="{!locItem.Country__c}">

</apex:inputfield>

</apex:column> 

<apex:column headerValue="State/Province">

<apex:inputfield value="{!locItem.State__c}">

</apex:inputfield> 

</apex:column> 

<apex:column headerValue="City"> 

<apex:inputfield value="{!locItem.City__c}">

</apex:inputfield> 

</apex:column> 

</apex:pageblocktable> 

</apex:pageblock>

</apex:form> 

</apex:page>




Now what if there is a requirement that the country field should not be displayed? But the requirement is still that the state picklist should only display the correct values for that country. With some trial and error I found out that the country picklist has to be on the page. I tried to set the render property of the column to be false, but that did not work. I also tried to set the width of the column to be 1%, but it seemed like a minimum length was going to be given to display the field no matter how I set the length. Finally I ran across some css that would do the trick. Set the style value for the column to be this: style=“display:none;visibility:hidden”. Then the column is really there, but just not visible to the end user. The full column in Visualforce would look like this:





<apex:column style="display: none; visibility: hidden;" headerValue="Country"> <apex:inputfield value="{!locItem.Country__c}"> </apex:inputfield> </apex:column>

Dependent picklist fields are very powerful and integrate so easily with Visualforce, but sometimes we need a little css help for a few final requirements.

/*
<apex:pageBlockSectionItem >
<apex:outputLabel value="Regions" style="position:relative;left:-100px"/>
<apex:inputField value="{!LeadInfo.Region__c}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel value="City" style="position:relative;left:-60px"/>
<apex:inputField value="{!LeadInfo.City__c}"/>
</apex:pageBlockSectionItem>
*/