function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Zac RosenbergZac Rosenberg 

Show/Hide Fields Dynamically

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!
pconpcon
It should like you are doing a Wizard [1] and that's the best fit for this.  You could also use the apex:tabs attribute, host this all in one visualforce page and then set the active tab based on what "step" the person is on.

[1] https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_wizard.htm
Dave_BoyceDave_Boyce
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
  • 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>
     
</apex:page>