Hiding and Showing Form Fields with Visibility Rules

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 1

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 OK.

 

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 Type selector. Checkboxes 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 SelectEditor checkboxes 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”.

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”.

 

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.

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.

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

In the resulting Edit object pop-up, configure the controls that will use the visibility rule. 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, Half Day Leave and Long Leave, are named in our form as Checkbox 1 and Checkbox 2, respectively. 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, are called DatePicker 1 and DatePicker 2. In the list Apply to Controls, check those checkboxes. Also check the checkboxes for the labels associated with the two datepickers – Label 1 and Label 2 – since we do not want to display the labels if the respective controls are hidden.

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, the rule’s inputs are automatically detected. 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.

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

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 FormDataName 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”, select the FormDataName “Long Leave”, and click OK.

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.

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.

 

Example 2

Another application of visibility rules is look to data set by the Create or Copy Data component, which in this example, creates a true/false flag for whether to display a custom error message in a form. A visibility rule in the form could look for this flag and know when to show an error message.

 

In the beginning of the flow, the Create or Copy Data step (renamed Show Error – False) is configured to create a single piece of data of Boolean data type, and a constant value of False. Based on the data input in the form, a rule determines whether proper criteria is met. If the output is false, the flow is directed to another Create or Copy Data step (renamed Show Error – True) which is configured to create a single piece of data of Boolean data type, and a constant value of True.

 

 

The form has a visibility rule to evaluate the value of the error flag. When the form first runs, the flag is set to false and therefore the error message does not appear. When the form visibility rule evaluates the error indicator as true, however, the custom error message does display to the user.

 

 

Additional Resources

• Creating Your First Form Flow
• Creating your First Rule
• Enabling and Disabling Form Fields with Visibility Rules
• Creating a Form Validation Rule
• Running a Validation Rule at Startup