Show If Rule

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

Maestro allows you to show a component if a condition is true. Use the Show if rule to show a component only when certain conditions have been met, for example provided answers or selections based on previous components. The Show if rule allows you to show components based on the value of other components.

Create a Show If Rule

To create a Show If rule:

  1. Inside the Maestro Editor, select a component from the View pane.
  2. In the Properties pane, click the Create Rule button.
  3. Click the Show If link, located under the Visibility heading.
  4. Define the JavaScript-based logic of the rule within the code editor. As a Visibility rule, the Show If rule should return true to show the component or false to hide the component.
  5. Click Save.

The rule will appear in the Properties pane, under the Rules heading.

Note

You can only attach one rule of each type to a component.

This example demonstrates a Show if to show a Mobile Number (AUS) component only when the answer to the radio button question is Yes. If a form user selects Yes, indicating that they have a mobile number, then a mandatory text field is displayed so the user can enter a mobile phone number.

To create the Show If rule, follow these steps:

  1. Open a Maestro form.
  2. Drag a radio button group component to a form.
  3. Drag a Mobile Number component to a form.
  4. Select the component to show only when the Yes option is selected.
  5. Click Create Rule.
  6. Select Show if.
  7. Type a JavaScript that implements the rule similar to the code shown above. If "Yes" is selected in the radio button group, the script will return true and the mobile number component will show in the form, otherwise the script returns false and the mobile number component is not shown on the form.
  8. Click Save.
  9. Click Build and Render Form to see how this rule is displayed when the form is built and rendered.
  10. If Yes is selected, the Mobile Number component is shown.

Visibility Rules

There are 4 types of visibility rules:

Next, learn how to create a show on receipt rule.