Hiding and Showing Form Fields with Visibility Rules

Last Updated: 05/03/2018 Introduced in Version: 2.0

Form elements can be used to control the visibility of other elements by applying Visibility Rules. To implement a visibility rule in the Form Designer, select the Surface component in the Explorer panel, then configure the settings in the Visibility Rules section of the Properties panel.

Example

Our example form will be a Leave Request Form. If the employee in question only wants to take a half day of leave, the date range controls will disappear. If the employee wants to take a long leave, the date controls will be displayed.

To make the Half Day Leave and Long Leave checkboxes work as controls for displaying the Start Date and End Date, we will define a rule that outputs “True” if Half Day Leave is unchecked and Long Leave is checked. In any other combination, we want the form to be hidden so our rule should output “False”. We will then apply this rule to our form controls in the Form Designer.

 

 

Begin in the portal by navigating to a Designer Folder and clicking the Create Rule button.

Change the rule Behavior to Form Rules. This allows the rule to be used within a form at the discretion of your form settings. 

In the New Rule pop-up, name the new rule “Show/Hide Rule”, and click CREATE.

 
 
 
Because our rule will produce a “True” or “False” outcome based on the value of two checkboxes, define these inputs, even without a form. In the Start Rule window under the Rule Input Data click Show Editor.
 
 
 

In the resulting popup, define the properties of our first data input – the value of the Half Day Leave checkbox. Name this input “Half Day Leave”. 

To the right of the Type field, click the Pick link. Check boxes only produce Boolean values of “True” or “False”. In the resulting Select Entity pop-up, select the type Boolean from the list, and click OK to close the pop-up.

Leave the Is List, Can Be Null, and Select Editor check boxes unchecked and click OK to save this rule input.

 

Next, add the input corresponding to the Long Leave checkbox. In the Start Rule window under the Rule Input Data click Add New.

In the resulting pop-up, define the properties of our second data input the value of the Long Leave checkbox. Name this input “Long Leave”.

To the right of the Type field, click the Type selector to select the appropriate data type. In the resulting Select Entity pop-up, select the type Boolean from the list, and click OK.

Leave the Is List, Can Be Null,and SelectEditor checkboxes unchecked and click OK to save this rule input.

 

Now that our inputs are defined, the next step is to construct the conditions of our rule. 

Add our first condition by clicking  Add New Rule Step in Start Rule window.

 

 
 

Build our first condition to read “Half Day Leave is False”.

 

 
 
Then select Add New Rule Step to build the “Long Leave is True” condition. 
 
 
 
 
 
 

Our final rule reads “If Half Day Leave is False and Long Leave is True”.

 
 
 

This completes our rule. Save and close the rule in the Rule Designer.

Next, configure a Leave Request Form. In the portal, navigate to a Designer Project folder and select the Leave Request Form thumbnail, and click the Edit link.

This opens the Form Designer, with Leave Request Form ready to edit.

In the right side of the window, expand the Explorer panel.  Select the Surface component. This is the bottom-most entity in our form stack (despite the fact that it’s displayed at the top of the tree), and is associated with the most basic properties of our form.  This function can be achieved by clicking anywhere outside of the form, as well. 

In the Properties panel, scroll down to the Visibility Rules section. Select the Use Visibility Rules checkbox. Click the Add New link to add our rule.

 

  

In the resulting Add Visibility Rules pop-up, configure the controls that will use the visibility rule.

Under the Rule Data section, name our rule “Show/hide Date Fields”. From the Rule drop-down list, navigate to our project folder containing the rule and select Show\Hide Rule.

Once the rule to use is selected, click the Update Inputs link. For this rule to apply to the controls selected above, it is necessary to edit each input to refer back to those controls. Begin by selecting the first input – Half Day Leave – and clicking the Edit button.

 

 

n the resulting Edit object pop-up, change the InputType of this input from “InputData” to “Form Component”.

Because the rule expects an input from our form, it is necessary to tell it which element will provide the input. Select this element – ­half day­ – in the Form Data Name drop-down list.

Click OK.

 

 

Next, select the second input – Long Leave – and click the Edit button.

As with our first input, give the second input the InputType “Form Component”, select the FormDataName “Long Leave”, and click OK.

 

 

By default, the Behavior setting is “Hide/Show”, which the desired behavior in this example, so leave it unchanged.

The two lists, Triggers and Apply to Controls, contain all of our form’s controls.

The checkboxes to watch are Half Day Leave and Long Leave. There are events associated with those controls that allow for more specific timing of the trigger, such as when the value changes and upon exiting (i.e. losing focus on) the control. This example will use the triggering event of when the value is changed. In the list Triggers, check the corresponding checkboxes. (Note that these form controls are configured for data Output Only.)

The form controls to display or hide, depending on the checkbox values need to be checked. Also check the checkboxes for the labels associated with the controls since we do not want to display the labels if the respective controls are hidden.

 

 

This completes our configuration of the Hide/Show visibility rule. Save and close the form.

Next, create a flow in which to display Leave Request Form. In the portal, navigate to a Designer Projects folder and select Create Flow.

Name the flow “Leave Request Flow”, and click OK to open the Flow Designer.

 

 
 
Begin the flow by adding our form to the workspace. It is located in the Flow Designer’s start-up window, under the Flows, Rules, Forms and Reports > Forms [Interaction] > [Current Folder] category. Click Add to add it to the workspace.
 
 
 
 

Next, connect the [Form] Leave Request Form‘s button outcome to the End Step.

This completes our flow. Click the Save Flow link at the top of the Flow Designer to save it, then close the Flow Designer.

We will now test our flow in the portal by clicking the Leave Request Flow thumbnail and selecting Run > Run Flow from its Action menu.

 

 

Our flow displays the form Leave Request Form, with all values empty. As a result, our datepicker controls are hidden.

 

 

When we check the checkbox for Half Day Leave, the date picker controls remain hidden.

 

 

When we uncheck the Half Day Leave checkbox and check the Long Leave checkbox, our date pickers, Start Date and End Date, appear. Because of the rule we designed in the first part of our example, our form will display or hide those controls, dependent on the state of the Leave Type checkboxes above them.

 
 

 
 

 

Additional Resources