Enabling and Disabling Form Fields with Visibility Rules

Last Updated: 12/07/2015 Introduced in Verision: 2.0

Form elements can be used to enable or disable other elements by applying Visibility Rules. To implement a visibility rule that disables one or more elements, select the Surface component in the Explorer panel, then configure the settings under the Visibility Rules section in the Properties panel, making sure to set the rule’s behavior to Enable / Disable.

Example

When we have finished setting up the visibility rules, our example form, the Leave Request Form, will use these visibility rules based on a user’s selection. If a user selects the Half Day Leave checkbox, the Long Leave checkbox will be disabled, and the control for the ending date will be hidden. If a user selects the Long Leave checkbox, the Half Day Leave checkbox will be disabled, and the date controls will be displayed.

This example assumes that the rule Half Day Leave has been created and stored in our project folder.

In our example we:

Create the rule and name it CheckBox Rule.
Add the CheckBox Rule to the Leave Request Form using the Visibility Rule found within the properties settings in the form.
Create a Leave Request Flow to open the Leave Request Form.
Run the flow to test the form.

Begin by building the CheckBox rule. Navigate to a Designer Project folder and click the Create Rule button.

In the New Rule pop-up, name the new rule “CheckBox Rule“, and change the Behavior to Form Rules, this will allow the rule to be used within a form, next click OK.

In the Rule Designer, begin building the rule in Start Rule window. First, add a a flow input for the Enable / Disable Rule. In the Rule Input Data section, we click the Add New link.

In the resulting pop-up, give the flow input the name “CheckBox Value” and click the Type selector to select the input’s data type.

In the resulting pop-up select the Boolean data type 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 selecting the Add New Rule Step item.

Build the condition to read “CheckBox Value is False”. Select CheckBox Value [Boolean] and click Next.

Select Logic > Is False and click Next.

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

Next, configure a Leave Request Form. It is necessary to add the CheckBox Rule to the 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.

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. The Long Leave rule will disable the Long Leave checkbox when the Half Day Leave checkbox is checked.

In the resulting Edit object pop-up, configure the controls that will use the visibility rule. By default, the Behavior setting is “Hide/Show”. Change this behavior to “Enable/Disable”.

In the Controls to Watch list, select the form field to watch, in this case, the Half Day CheckBox.

In the Apply to Controls list, select the form fields to be enabled or disabled, in this case, the End DatePicker 2 and Long Leave CheckBox.

Next, name the visibility rule “Half Day Enable/Disable“. Click on the selector, select the CheckBox Value Rule from the Rule drop-down list. The rule can be found by expanding your current project folder, which starts with [Current: and ends with your project name.

To work as a rule, it is necessary to configure the form visibility rule to look at specific form inputs rather than the generic input data objects with which it was designed. Do this by selecting the data input configured previously – CheckBox Value – in the Rule Inputs list. Click the Edit button.

In the resulting pop-up, we will change the InputType from InputData to Form.

In the FormDataName drop-down list, select the name of the form control that will provide the input. In this case, select Half Day. Then, click the OK button to save our changes to the CheckBox input.

To complete the form functions for the Long Leave CheckBox add a second Visibility Rule.

Change this behavior to “Enable/Disable”.

In the Controls to Watch list, select the form field to watch, in this case, the Long Leave CheckBox.

In the Apply to Controls list, select the form fields to be enabled or disabled, in this case, the Half Day CheckBox.

Next, name the rule and select the CheckBox Value Rule from the Rule drop-down list. You may reuse the CheckBox Rule previously created.

Select the data input configured previously – CheckBox Value – in the Rule Inputs list. Click the Edit button.

Change the InputType from InputData to Form.

In the FormDataName drop-down list, select the name of the form control that will provide the input. In this case, select Long Leave. Then, click the OK button to save our changes to the Long Leave input.

This completes the configuration for our visibility rule; click OK in the Edit object pop-up.

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 onto 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 this form to our 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.

In the resulting pop-up, we’re presented with the Leave Request Form we just configured.

When we check the Half Day Leave checkbox, the Long Leave checkbox is disabled, as well as the End Date datepicker (which we may not actually see if the Hide/Show rule was created beforehand).

When we check the Half Day Leave checkbox, the Long Leave checkbox and the DatePicker 2 is disabled.

When we uncheck the Half Day Leave checkbox, the Long Leave checkbox and the End Date: DatePicker 2 is re-enabled.

Enabling and Disabling Form Fields with Visibility Rules

Example

Additional Resources