Enabling and Disabling Form Fields with Visibility Rules
  • Updated on 09 May 2013
  • 6 minutes to read
  • Print
  • Dark
    Light

Enabling and Disabling Form Fields with Visibility Rules

  • Print
  • Dark
    Light

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

2018-01-09_1.png

2018-01-09_2.png

In our example we:

  1. Create the rule and name it CheckBox Rule .

  2. Add the CheckBoxRule to the Leave Request Form using theVisibility Rule found within the properties settings in the form.

  3. Create a Leave Request Flow to open the Leave Request Form .

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

2018-01-09_3.png

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

2018-01-09_6.png

In the Rule Designer , begin building the rule in Start Rule window. First, add 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.

2018-01-09_7.png

In the resulting pop-up select the Boolean data type and click OK .

2018-01-09_8.png

Leave the Is List , Can Be Null , and SelectEditor checkboxes unchecked and clickOK 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 .

2018-01-09_9.png

Select Logic > Is False and click Next .

2018-01-09_10.png

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.

2018-01-09_11-1024x680.png

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 theVisibility 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 theHalf Day Leave checkbox is checked.
In the resulting Edit object pop-up, configure the controls that will use the visibility rule.
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.

2018-01-09_12.png

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 theEdit button.
In the resulting pop-up, we will change theInputType 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.

2018-01-09_13.png

By default, theBehavior setting is "Hide/Show". Change this behavior to "Enable/Disable".

In the Triggers list, select the form field to watch, in this case, the Half Day CheckBox (value changed) . In theApply to Controls list, select the form fields to be enabled or disabled, in this case, the End DatePicker and Long Leave CheckBox .

2018-01-09_14.png

To complete the form functions for the Long Leave CheckBox, add a second Visibility Rule .  
Name the rule and select the CheckBox Value Rule from the Rule drop-down list. You may reuse the CheckBox Rule previously created.

2018-01-09_15.png

Select the data input configured previously - CheckBox Value - in the Rule Inputs list. Click theEdit button.
Change theInputType 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.

2018-01-09_16.png

Change this behavior to "Enable/Disable". 
In the Triggers list, select the form field to watch, in this case, the Long Leave CheckBox . In theApply to Controls list, select the form fields to be enabled or disabled, in this case, the Half Day CheckBox.

2018-01-09_17.png

This completes the configuration for our visibility rule; clickOK 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 clickCREATE to open the Flow Designer .

2018-01-09_19.png

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.

2018-01-09_20-1024x768.png

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.

2018-01-09_21.png

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.

2018-01-09_22.png

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

Was this article helpful?