jose_r1

Hide/Show One or Many Panels Based on Array (or, check boxes)

Blog Post created by jose_r1 on May 11, 2017

OFFICE 365

 

Recently, I had the need to hide/show panels based on a value or values of a choice control. Online I saw multiple posts on how to accomplish this using simple rules; however, they did not explain how this would affect the user when accessing the form in read-only.

 

For this post, I'll be referring to the following setup:

  • A choice control with three options: Panel A, Panel B, and Panel C
  • Three panels, each corresponding to the options listed on the choice control

The expected behavior is as follows:

  • A user sees only sees the panels the correspond to the options selected in the choice control.
  • When the recipient or user opens the form in read only, he/she should see the panels that were selected in the choice control

Solution 1:

  • Create three formatting rules, one for each panel. The formula is as follows: Choice != 'Panel A'. Lastly, the Hide checkbox should be checked.

  • ISSUE: When selecting only one of the options from the choice control, the rules work as expected; however, if the user selects multiple options, the panels do not show as expected, i.e. they remain hidden.

Solution 2:

  • The first solution does not work when multiple options are selected because you working with an array. To solve the issue explained in the first solution, you will need to use the runtime function, inArray(). With that being said, the formula in the first solution would change from Choice != 'Panel A' to not(inArray(Choice, 'Panel A')). You will need to nest the runtime function in a not() function because the formatting rule will expect a FALSE outcome to make the panel visible. TRUE values keep the panels hidden.

  • ISSUE: When the form is opened in read only, the panels will not show if only one option was selected. The first solution works towards resolving this issue; however, if multiple options are selected, none of the panels are shown.

MY SOLUTION:

  • I noticed that the first solution works when one option is selected in both read only and edit mode. In addition, I noticed that the second solution works when multiple options are selected in both read only and edit mode. In order to combine both solutions, I decided to use an if() runtime function. The formula I built is as follows: 
    • IF(inArray(Choice, 'Panel A'), not(inArray(Choice, 'Panel A')), Choice != 'Panel')
  • What I'm saying with this formula is the following:
    • If the Panel A is in an Array, meaning multiple options were selected, use Solution 2. If Panel A is not in an array, meaning it is the only selected option, use Solution 1.
  • With this solution, the user can see the panels that corresponding with the selected options. In addition, users can view the corresponding panels with opening the form in read only.

Outcomes