Non mandatory dropdown field in Flow

I have been working on Salesforce flow for a time now and faced many challenges. I always had an option to use Visualforce page however Flow is fun and powerful. In previous article , I have explained how we can create two column layout in flow, which was very easy to use.

Recently, I came to know that we cannot create none required dropdown field in Flow. So please vote this idea so that we will not need this workaround.

Making none mandatory dropdown field is very easy and you don’t need to know any coding, just follow below simple steps:

1. Download JQuery and save it as a static resource by name “JQuery”.
2. Copy below Visualforce page
3. Replace “flow:interview” name by your flow name
4. If you are expecting any URL parameter then simply add it as “apex:param” as shown in code
5. Add your field names which does not need to be mandatory in variable “nonMandatory”
6. In your Flow, add “– None –” as first choice in dropdown

Lets repeat above steps in detail with an example.

Assume, that I have below Screen in my flow

Make sure, flow which you don’t want to be required has “– None –” value as shown below

Save this flow and mark screen as starting element

In my case , Flow name is saved as “Non_Required_Dropdi”. Currently you cannot change unique name of flow and its automatically generated, please vote this idea if you want ability to change it later.

Create a Visualforce page with below code

<apex:page>
    <apex:includeScript value="{!$Resource.JQuery}"/>    
	<!-- replace below name by your flow Name -->
    <flow:interview name="Non_Required_Dropdi" finishLocation="/{!$CurrentPage.parameters.id}">
        <apex:param name="varParameter1" value="{!$CurrentPage.parameters.sampleParameter}"/> 
    </flow:interview>    
    <!-- fields in flow does not has good padding, so add some extra -->
<style type="text/css">
        .dataCol, .labelCol{
        	    padding-top: 5px !important;
    			padding-bottom: 5px !important;
        }
    </style> 
    <script type="text/javascript">     
        $(function(){
            /* add name of fields from flow mark as none mandatory */
        	var nonMandatoryIds = ["Non_Required_Dropdown_List","field2Name"];
            
            for(var i = 0; i < nonMandatoryIds.length ; i++){
                removeRequiredMark(nonMandatoryIds[i]);
            }            
        });    
    	function removeRequiredMark(fieldId){           	
            $('select[id*='+fieldId+']').each(function() { 
                $(this).parent().find(".requiredBlock").remove();
            });
         }
    </script>
</apex:page>

In above code at line 5, we need to add flow unique name. On line 25, we need to add comma separated names of field from flow to mark as none required.

Below is final output of flow, as we can see field by name “Non_Required_Dropdown_List” is not marked as mandatory.