Building element visibility logic

The logic defined in the VISIBILITY tab of the configuration pane defines whether the element is visible to the user or not, and/or whether the element is enabled or not.

The visibility dependency logic builder allows you to build recursive conditions of a complex nature, should you need them.

The result of the logic in each dependency will be either TRUE or FALSE at any given time while the user has the form open. Based on this, the chosen element State for each dependency you build will be set appropriately.

Note

You can build visibility logic for any element type.

Complexity of visibility logic

You can build visibility dependency logic to be as complex as you need, by creating multiple, recursive blocks with multiple conditions. Technically, there are currently no limitations.

To build element visibility logic

  1. Click the element on the UI Builder canvas.

  2. Click the VISIBILITY tab in the configuratin pane.

    ../../_images/ss-uibuilder-visibility-empty.png
  3. Click New dependency.

  4. Select the State you are going to create condition logic for.
    The options are:
    • Visible

    • Enabled

  5. Select the Condition block modifier.
    The options are:
    • And

    • Or

  6. Click New condition to add a condition to the block.

    1. Select a Condition type.
      Visibility conditions are built using any combination of the following condition types:
      • Model
        This is the model value of one of the form elements. You must enter the ID of the element in the Property name field.
        You must also specify the Is field. Currently, the only values are True and False.
        For elements which are not boolean in nature, if the element value is not empty, the model value to True.
        In later releases, we intend to introduce numbers, strings, etc.
      • Form validation state
        The Validation state of the entire form, based on any and all individual validation rules you define for the elements.
        You must specify the Is field.
      • Form dirty state
        The Dirty state of the form.
        You must specify the Is field.
      • Form Touched state
        The Touched state of the form.
        You must specify the Is field.
      • Roles
        Current user roles.

        Note

        Currently, you must know the internal Acronis role names you are interested in using.
        In later releases, we will introduce a dropdown list with options.
  7. [Optional] Click New condition to add another condition to the current logic block and repeat from step 6.

  8. [Optional] Click New block to create a recursive logic block and repeat from step 5.

  9. [Optional] Click New dependency to add a new dependency and repeat from step 4.

Note

To delete a condition, click Delete condition, at the bottom of the condition field set.
To delete a block, click Delete block, at the bottom of the block field set.
To delete an entire dependency, click Delete, at the bottom of the dependency field set.

Example 1

In this example, there are two conditions in a single block. The button will only be enabled when Input1 is not empty AND the user input for each field in the entire form is valid.

../../_images/ss-uibuilder-visibility-example.png

Example 2

In this example, there are two separate dependencies.

The first specifies that the button is not visible until Input1 is not empty. The second specifies that the button is not enabled until the user input for each field in the entire form is valid.

This means that the button will not be visible when the form is opened, but will appear as soon as the user types anything in Input1. However, the button might not yet be enabled - depending on the validation rules for all the elements in the form.

../../_images/ss-uibuilder-visibility-example2.png