• What is the conditional component?
• Using the component
  • Single Rule 
  • Multi Rule

What is the conditional component?

The conditional component is a mechanism in Betty Blocks to provides basic “if then” conditional logic to hide or display any components inside the components tree hierarchy. Essentially the component allows you to show or hide components on the page based on a rule or set of rules. 

Using the component

There are two ways to use the component: a single rule or multi rule.

Single Rule 

Using the single rule option allows the developer to select one model property, input variable, input field value or Page variable value as the Left side of the conditional.  The Right side can be a string or any of the options that were available on the left side. 

Example 

Use a conditional component to reveal a text box on a form if the user checks a checkbox. 

Add the conditional component to the page and if the form already has the checkbox and text box on it move the conditional component just above the text box. Now drag the text box inside the component’s canvas space. It should end up looking like the screenshot.



Now select the conditional component and set its properties as follows: 

• Left: select the checkbox from the +
• Right: enter the text "true"

Now run the page and the text box should be hidden until the checkbox is checked and then it should appear. This is the basic usage of the conditional. 

Multi Rule

To use the multi-rule option, the component must be inside a Data-providing component like a Data Container, Data List or Data Table. Currently the new Page Object Variables will not enable the multi-rule option. Reasons to use the multi-rule option would include: 

• Need to use the “or” or “and” options to ensure one or more values are valid for the conditional
• Need to check multiple models or properties.  
• Need to check the existence of a model or model property. Currently exists is only available in the multi-rule rule set. 

The multi-rule functions the same as filtering on Models so the behavior should be familiar for developers. 

Example

Often an application needs to only show an option based on the value of more than one field in the application. In this example we want to ensure the user checked not one check box, but multiple check boxes before showing the text box.  

1. Using the same setup as the single rule example, we will modify the conditional properties.  
2. Next to switch to multi-rule if any value exist in the single rule options delete those values.
3. Then switch to the multi-rule and select “Display Logic”. 
4. In the dialog box configure it so both checkboxes are required to be true. Notice how in the multi-rule the checkbox now has a checkbox for a value, since the multi-rule only works with models and a model property, it has auto-detection of the property type and provides validation of the allowable values.
   
   
   
   
5. Click save and the conditional will now only display the text box if both are checked. 

This has been a quick overview of how Conditionals work. Betty Blocks is working on a new version of the conditional component and once that is released, we will update this KB with a more in-depth look at the conditional component and its capabilities.