Ask Search:
Dipika DabasiaDipika Dabasia 

dependent fields in a flow

I am new to flows but have managed to create a basic one with the help of google! In 1 screen I have 2 picklist fields and would like 1 to be dependent on the other. If XX is selected from the first picklist field then only certain values are available in the second picklist field...is this possible?
EdEd (salesforce.com) 
Hi Dipika,

It appears that what you are trying to do is something defined on the following Idea:

https://success.salesforce.com/ideaView?id=08730000000sZ6RAAU

Thanks!
Dipika DabasiaDipika Dabasia

Hi Ed, thanks for this! Better start breaking down the flow! 

Have a nice day : ) 

Dipika DabasiaDipika Dabasia
Hi Ed, I have followed the guide, however, it is still not working. I have put the controlling field on one screen and the dependent field in the next but I am receiving an unhandled fault. Also, the values available on the dependent picklist field are not as set in salesforce, it still gives a list of all values. 

I have attached a screenshot of the flow if this is useful.....Please could you help? Thanks 

User-added image
Dave BoyceDave Boyce
I got this to work by using JavaScript to show/hide a child picklist based on the value of the controlling field picklist.  I still had to break the dependent picklist into all the various values (child picklists) based on the dependency mapping on the controlling field.  I added each of the child picklists to the Flow screen then in JavaScript can show/hide the correct child picklist based on the controlling field selection.  

Any child picklist changes means you now need to update 3 locations:
  • Location 1: Update the dependent picklist (this contains all the picklist values)
  • Location 2: Update the dependency mapping of the controlling field for the dependent picklist (this is needed for direct Salesforce support and enforces validation related to valid values in flow for update).
  • Location 3: Update the associated child list which is needed for flow support.
Could write some Apex to get around that step and some additional supporting JavaScript to build the child picklist in realtime but for now only have a couple of child picklist that I had to create.
https://salesforce.stackexchange.com/questions/4462/get-lists-of-dependent-picklist-options-in-apex
 
<script type="text/javascript">
    
        function CheckFields()
        {
          SetShowHideField('Flow_Controlling_Field_ID', 'Flow_Child_Field_ID', 'Picklist', 'Flow_Controlling_Field_List.Choice1');
        }
        
        function SetShowHideField(field, otherfield, inputType, comparevalue1, comparevalue2)
        {
          var inputField = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + field + '.input');
          if (inputField == null) { return; }
          
          var valueField = inputField.value;
          
          var inputFieldOther = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + otherfield + '.input');
          if (inputFieldOther == null) { return; }
          
          if (inputType == 'Text') {
            
            var inputFieldOtherPrompt = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + otherfield + '.prompt');
            if (inputFieldOtherPrompt == null) { return; }
            
            if (valueField.length > 0) {
               inputFieldOther.style.display = 'block' 
               inputFieldOtherPrompt.style.display = 'block' 
            }
            else {
                inputFieldOther.style.display = 'none'
                inputFieldOtherPrompt.style.display = 'none'
            }
          }
          else if (inputType == 'Picklist') {
            if (valueField.localeCompare(comparevalue1) == 0 || valueField.localeCompare(comparevalue2) == 0) {
               inputFieldOther.style.display = 'block' 
            }
            else {
               inputFieldOther.style.display = 'none'
            }
          }
        }
        
        var checkTimer = setInterval(CheckFields, 250);
  </script>

Update the call to SetShowHideField for each of your child picklist.  Then based on the value in the controlling field which show/hide the corresponding child picklist for selection.
Duncan StewartDuncan Stewart
Very clean and straightforward code -- can you add a few code comments, and an example of what the VF code that calls it looks like?  
Dave BoyceDave Boyce
Here is an updated version with full VF code & comments where I'm able to get the dependent picklist functionality in flow on the same screen without having to create any child picklists or multiple screens in flow.  This is important because now any changes to the dependent picklist are automatically update in your flow process on a single screen.

The method is to render & hide the dependent picklists (controlling field and dependent field) in Visualforce where dependent picklists are supported.  In Javascript detect when you change the controlling field in flow then update the Visualforce controlling field with the Flow controlling field value.  This will cause the Visualforce dependent field to get updated and then copy the Visualforce dependent field values into the Flow dependent field.

The code below is working but needs some additional optimizations & should use Jquery to get elements without having to include the full id name (i.e., [Page]:j_id1:i:f:pb:d:[Control]).  At some point I'll publish a generic github package to make it easier for integration into Salesforce.
<apex:page id="ldp_register" showHeader="false" standardController="Offering_Category__c">

  <flow:interview name="[Flow Name]"/>

    <!-- Load the dependent fields in Visual Force -->
    <apex:form style="display:none" >
        <apex:inputField value="{!Offering_Category__c.Category__c}" id="category"/>
        <apex:inputField id="subcategory" value="{!Offering_Category__c.Subcategory__c}"/>
    </apex:form>

  <script type="text/javascript">
    
        function CheckFields()
        {
          <!-- Check Series Summary -->
          SetShowHideField('Screen_Single_Offering_Series_Name', 'Text', 'Screen_Single_Offering_Series_Summary', 'Text');

          <!-- Check Dependent Fields in Flow for change to controlling field -->
          SetDependencyField('category', 'subcategory', 'Screen_Category_Topic', 'Screen_Category_Subtopic');
        }
        
        <!-- SetShowHideField - function that is periodically checking the flow screen to see if a particular field should be shown/hidden --> 
        function SetShowHideField(field, inputTypeField, otherfield, inputTypeOtherField, comparevalue1, comparevalue2)
        {
          var inputField = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + field + '.input');
          if (inputField == null) { return; }
          
          var valueField = inputField.value;
          
          var inputFieldOther = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + otherfield + '.input');
          if (inputFieldOther == null) { return; }
          
          if (inputTypeOtherField == 'Text') {
            
            var inputFieldOtherPrompt = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + otherfield + '.prompt');
            if (inputFieldOtherPrompt == null) { return; }
            
            if (valueField.length > 0) {
               inputFieldOther.style.display = 'block' 
               inputFieldOtherPrompt.style.display = 'block' 
            }
            else {
                inputFieldOther.style.display = 'none'
                inputFieldOtherPrompt.style.display = 'none'
            }
          }
          else if (inputTypeOtherField == 'Picklist') {
            if (valueField.localeCompare(comparevalue1) == 0 || valueField.localeCompare(comparevalue2) == 0) {
               inputFieldOther.style.display = 'block' 
            }
            else {
               inputFieldOther.style.display = 'none'
            }
          }
          else if (inputTypeOtherField == 'MultiPicklist') {
            if (valueField.localeCompare(comparevalue1) == 0 || valueField.localeCompare(comparevalue2) == 0) {
               inputFieldOther.style.display = 'block' 
            }
            else {
               inputFieldOther.style.display = 'none'
            }
          }
        }

        <!-- SetDependencyField: Function to update Flow:Dependent_Field when the Flow:Controlling_Field changes by using hidden fields in Visualforce -->
        function SetDependencyField(controllingFieldVF, dependentFieldVF, controllingFieldFlow, dependentFieldFlow)
        {
          var inputControllingFieldVF = document.getElementById('{!$CurrentPage.Name}:j_id8:' + controllingFieldVF);
          if (inputControllingFieldVF == null) { return; }
          var inputDependentFieldVF = document.getElementById('{!$CurrentPage.Name}:j_id8:' + dependentFieldVF);
          if (inputDependentFieldVF == null) { return; }
          var inputUnselectedDependentFieldVF = document.getElementById('{!$CurrentPage.Name}:j_id8:' + dependentFieldVF + '_unselected');
          if (inputUnselectedDependentFieldVF == null) { return; }
          var inputSelectedDependentFieldVF = document.getElementById('{!$CurrentPage.Name}:j_id8:' + dependentFieldVF + '_selected');
          if (inputSelectedDependentFieldVF == null) { return; }

          var inputControllingFieldFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + controllingFieldFlow + '.input');
          if (inputControllingFieldFlow == null) { return; }
          var inputUnselectedDependentFieldFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '.input_unselected');
          if (inputUnselectedDependentFieldFlow == null) { return; }
          var inputSelectedDependentFieldFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '.input_selected');
          if (inputSelectedDependentFieldFlow == null) { return; }
          inputSelectedDependentFieldFlow.style.display = 'none';
          var inputDependentFieldFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '.input');
          if (inputDependentFieldFlow == null) { return; }
          var inputLeftArrowFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '.input_left_arrow');
          if (inputLeftArrowFlow == null) { return; }
          inputLeftArrowFlow.style.display = 'none';
          var inputRightArrowFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '.input_right_arrow');
          if (inputRightArrowFlow == null) { return; }
          inputRightArrowFlow.style.display = 'none';

          var inputDependentFieldSelectedFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Selected.input');
          if (inputDependentFieldSelectedFlow == null) { return; }
          inputDependentFieldSelectedFlow.style.display = 'none';
          var inputDependentFieldChoiceFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Choice.input');
          if (inputDependentFieldChoiceFlow == null) { return; }
          inputDependentFieldChoiceFlow.style.display = 'none';
          var inputSelectedDependentFieldChoiceFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Choice.input_selected');
          if (inputSelectedDependentFieldChoiceFlow == null) { return; }
          inputSelectedDependentFieldChoiceFlow.style.display = 'none';
          var inputUnselectedDependentFieldChoiceFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Choice.input_unselected');
          if (inputUnselectedDependentFieldChoiceFlow == null) { return; }
          inputUnselectedDependentFieldChoiceFlow.style.display = 'none';
          var inputLeftArrowChoiceFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Choice.input_left_arrow');
          if (inputLeftArrowChoiceFlow == null) { return; }
          inputLeftArrowChoiceFlow.style.display = 'none';
          var inputRightArrowChoiceFlow = document.getElementById('{!$CurrentPage.Name}:j_id1:i:f:pb:d:' + dependentFieldFlow + '_Choice.input_right_arrow');
          if (inputRightArrowChoiceFlow == null) { return; }
          inputRightArrowChoiceFlow.style.display = 'none';
          
          var valueControllingFieldVF = inputControllingFieldVF.value;
          var innerControllingFieldFlow = inputControllingFieldFlow.options[inputControllingFieldFlow.selectedIndex].text;
          
          <!-- Check for change on controlling field -->
          if (valueControllingFieldVF != innerControllingFieldFlow) {
          
              inputControllingFieldVF.value = innerControllingFieldFlow;
              inputControllingFieldVF.onchange();
          }
          
          <!-- Check for change on dependent field -->
          if (inputUnselectedDependentFieldVF.options[0].text != inputUnselectedDependentFieldFlow.options[0].text) {
          
              while (inputUnselectedDependentFieldFlow.length > 0) {
                  inputUnselectedDependentFieldFlow.remove(0);
              }

              while (inputSelectedDependentFieldFlow.length > 0) {
                  inputSelectedDependentFieldFlow.remove(0);
              }

              while (inputDependentFieldFlow.length > 0) {
                  inputDependentFieldFlow.remove(0);
              }

              while (inputSelectedDependentFieldChoiceFlow.length > 0) {
                  inputSelectedDependentFieldChoiceFlow.selectedIndex = 0;
                  inputLeftArrowChoiceFlow.click();
              }
              
              for (i = 0; i < inputDependentFieldVF.length; i++) {
              
                  var optionUnselected = document.createElement("option");
                  optionUnselected.text = inputUnselectedDependentFieldVF.options[i].text;
                  optionUnselected.value = i.toString();

                  inputUnselectedDependentFieldFlow.add(optionUnselected, i);
              }
          }
          
          <!-- Check for change in selected subtopic -->
          var selectedText = '';
          for (selectedIndex = 0; selectedIndex < inputUnselectedDependentFieldFlow.length; selectedIndex++)  {
              if (inputUnselectedDependentFieldFlow.options[selectedIndex].selected) {
                  selectedText = selectedText + '<li>' + inputUnselectedDependentFieldFlow.options[selectedIndex].text + '</li>';
              }
          }

          <!-- Check for change in selected text value to previous selected text -->        
          if (selectedText != selectedTextPrevious) {
          
              inputDependentFieldSelectedFlow.value = selectedText;
              selectedTextPrevious = selectedText;
              
              var listLength = inputSelectedDependentFieldChoiceFlow.length;
              for (i = 0; i < listLength; i++) {
                  inputSelectedDependentFieldChoiceFlow.selectedIndex = 0;
                  inputLeftArrowChoiceFlow.click();
              }
              
              for (selectedIndex = 0; selectedIndex < inputUnselectedDependentFieldFlow.length; selectedIndex++)  {
              
                  if (inputUnselectedDependentFieldFlow.options[selectedIndex].selected) {
                  
                      for (i = 0; i < inputUnselectedDependentFieldChoiceFlow.length; i++) {
                      
                          if (inputUnselectedDependentFieldChoiceFlow.options[i].text == inputUnselectedDependentFieldFlow.options[selectedIndex].text) {
                          
                              inputUnselectedDependentFieldChoiceFlow.selectedIndex = i;
                              inputRightArrowChoiceFlow.click();
                              
                              break;
                          }
                      }
                  }
              }
          }
        }
          
        var checkTimer = setInterval(CheckFields, 250);
        var selectedTextPrevious = '';
  </script>  
    
</apex:page>

 
Warren Walters954Warren Walters954
There is now a standard flow component for dependent picklists as of Winter '19.
Check out this video on how to create a dependent picklist.
https://youtu.be/FSQ52gVOgcY

Salesforce Documentation 
https://help.salesforce.com/articleView?id=flow_ref_elements_screencmp_dependentpicklists.htm&type=5
https://developer.salesforce.com/docs/atlas.en-us.salesforce_vpm_guide.meta/salesforce_vpm_guide/vpm_designer_elements_screen_dependentpicklists.htm

If this answer was helpful, mark it as the best answer.
Walters954 - salesforcementor.com
Remember I believe in you