Visual Workflow: Show/Hide Fields

Question

I'm creating a visual workflow which will guide a user through creating different sObjs. Depending on user input from a previous page, I'd like to show/hide future fields.

Example:

Screen 1
---------
Display: Would you like Beer or Juice?
Input Field: Dropdown

Screen 2
--------
Display: Select a type
Input field: Dynamic Dropwdown
(If beverage.type == 'Beer')
Display: Please enter your age
Input: Integer Box

On screen 2, there is no need to show the age integer box if the beverage type is juice. What I would like to be able to do is be able to show/hide fields based on certain boolean vars (i.e. Boolean Beverage_is_alcohol).

This is a simplistic example. The use case has multiple screens with sufficiently more "show/hide" fields that it would make the form page significantly longer.

I haven't seen anything in the Visual Flow documents that show a standard way to accomplish this. I have two thoughts on how I might solve this - but before choosing either, I'd like to ask for ideas.

Option 1 - Multiple Screen Options

Create several screens with different field combinations. Create Decision Nodes to route user to the screen with the correct combination of fields.

*This may require we create an exponentially growing amount of screens. This option is likely not scalable.

Option 2 - jQuery Dom Manipulation

Find a way to signal JS which field set should be shown and find fields via element.id and hide them (or remove, considering that hiding doesn't shrink the form size)

*This option requires a developer be made available for changes. I'd prefer if non-technical users can make changes to the workflow.

Is there an option 3? If not, perhaps you can offer some advice about which of the above two is the better path?

Thank you!

Answer 1

Option 1 is generally the correct choice if you want to use flows. You'd want to create multiple screens for different variations. Flows are meant to be useful to non-developers, which also means it's rather limited in capacity, such as choosing which fields to render, etc. If you need more complex interactions (e.g. it's simply won't scale well), then you need Visualforce or Lightning-- you need a developer. I would not recommend trying jQuery manipulation on flows, because their behavior/classes/etc may change arbitrarily, and the scripts won't work anymore.

Answer 2

There is a new feature in Flow that will allow show/hide in Spring '17 release.  I haven't tried the funcationality yet because you have to get accepted into the Pilot program before they enable any pilot features.  We sent in our request through our sales rep to join the Pilot.  In the process of waiting for the Pilot feature to get enabled I figured out how to do this in the VisualForce page that is hosting the Flow. Dynamically Update Flow Screen Fields https://releasenotes.docs.salesforce.com/en-us/spring17/release-notes/rn_forcecom_flow_fieldrules.htm

SR_RegistrationTest:j_id0:i:f:pb:d:Screen_Role.input

• SR_RegistrationTest: id of the apex page

• List item: Screen_Role Flow 'Unique Name' value on the screen field you set in Flow

  <apex:page id="SR_RegistrationTest">
  
  <flow:interview name="Registration" finishLocation="{!URLFOR('/sr_registrationfinished')} "/>
  
  <script type="text/javascript">
      function SetShowHideState()
      {
        var inputField = document.getElementById('SR_RegistrationTest:j_id0:i:f:pb:d:Screen_Role.input');
        var valueField = inputField.value;
        var inputFieldOther = document.getElementById('SR_RegistrationTest:j_id0:i:f:pb:d:Screen_Role_Other.input');
        <!-- Other is Roles.Choice6 -->
        alert(valueField);          
        if (valueField.localeCompare('Roles.Choice6') == 0) {
           inputFieldOther.style.display = 'none' 
        }
        else {
            inputFieldOther.style.display = 'block'
        }
      }
      var checkTimer = setInterval(buttonClick, 1000);
  </script>