Handling Conditionality

Very early in your development, you will want to show some elements differently based on some conditions. For instance, show a 'Log out' button if the user is logged in, or change the color of a button when the user hovers it with the pointer.

Defining conditions

When you edit an element (by double-clicking on it), you can see the Property Editor. The Appearance Tab defines the general behavior of the element, and the Conditional Tab is where you can define some conditions that will apply to this element in run mode.

A condition is composed of two different things:

  1. The condition itself, that defines when the properties defined in 2 apply. In the example above, this is Current user isn't logged in.
  2. The properties that should be modified when the element meets the condition defined in 1. In this case, the element will not be visible.

You define the condition using the Expression Composer. You do not need to type anything, but instead, use the dropdown menus that show you the possible options. Note that the condition must end up being a yes/no expression, and if it does not it will be reported as an issue by the issue checker. If you wanted to change how a button looks when the user hovers it with the mouse, the condition would be This Button is hovered.

When editing an element's condition in the Editor, you can click on ON/OFF to artificially put the element in that state for editing purposes. This has no effect on the element.

If more than one condition is true for an element, all conditions will be applied. If two conditions or more have contradictory properties (i.e. the same property is modified in different ways in 2 conditions or more), the last one wins. Therefore, you can control the order of the conditions by clicking on 'move up' or 'move down'.

Custom states

Conditions will most of the time involve data from the database, the Working with Data covers the key concepts when using data. An important concept is the concept of Custom State for an element. This will also be covered in this chapter; in a nutshell, this feature lets you assign to an element any kind of data, and you can then use this state when defining a condition. For instance, a state 'showing' at the page level can be of type yes/no, and you can use some actions to change its value. Using this state in condition, you can control many elements' visibility at once, using the same state. This is a particular common pattern as you design complex user interfaces. Refer to the relevant section for more details regarding custom states.

Run-mode debugging

As an element can have more than one condition, several conditions can be evaluated to yes on the same element. You will often have to debug an element's behavior when it involves conditions to understand its behavior, we recommend using the debugger to inspect an element and figure out which condition is evaluated to true and how it impacts the element's appearance. See the Using the Debugger chapter in the manual for more details.


Property changes, when a condition's evaluation changes from no to yes, or the other way around, are immediate. If you want some properties to change gradually, you can define some transitions rules in the third tab of the Property Editor. This is useful if you want to give a more fluid feel to your user interface. For instance, in the illustration below, the background color will change from the initial value to the final value in 200 miliseconds, following an easing curve (see here.

These transitions rules can only be applied to some visual properties. For instance, changing a text of a button cannot be modified gradually, while changing its color can.

results matching ""

    No results matching ""