Enabling and Disabling Form Fields with Visibility RulesLast Updated: 05/03/2018 Introduced in Version: 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.
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.
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 resulting pop-up select the Boolean data type and click OK.
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.
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.
In the right side of the window, expand the Explorer panel.
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.
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.
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.
Change this behavior to “Enable/Disable”.
In the Apply to Controls list, select the form fields to be enabled or disabled, in this case, the Half Day CheckBox.
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 CREATE to open the Flow Designer.
Next, connect the [Form] Leave Request Form‘s button outcome to the End Step.
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.