Skip to main content

Conditions

Conditions or conditional statements are used in programming to execute certain sections only under certain conditions.

In a mos configuration conditions can be used in the following contexts:

Conditions are based on the evaluables concept.

Layer value conditions​

Sometimes the value of a layer needs to change based on another value (e.g. different text in a text layer, different color in a color layer) without creating an entirely new layer for that specific value. In this case a condition can be used during data binding in the client template file.

In the following example, the myText layer only displays the text "1 view" if the viewCount field is equal 1, but uses the plural "views" in all other cases (e.g. 0 views, 2 views, etc.):

{
  "name": "myTemplate",
  "content": {
    "myText": {
      "value": {
        "left": "{{viewCount}}",
        "mode": "equals",
        "right": "1",
        "trueValue": "{{viewCount}} view",
        "falseValue": "{{viewCount}} views"
      }
    }
  }
}

The trueValue and falseValue fields hold the actual values that are to be displayed depending on whether the condition is met or not.

info

This type of condition only works with the value field, so it is quite limited in altering more specific content. In those cases, the use of a layer state condition is required.

Layer state conditions​

Layer state conditions can be used if the state of a layer needs to change dynamically.

Instead of just changing a value within a layer, we may also want to hide the entire layer or change its opacity based on a condition.

The example below highlights how this may be achieved:

{
  "name": "myTemplate",
  "content": {
    "myText": {
      "states": {
        "hidden": {
          "hidden": true
        }
      },
      "conditions": [
        {
          "state": "hidden",
          "conditions": {
            "left": "{{viewCount}}",
            "mode": "equals",
            "right": "0"
          }
        }
      ]
    }
  }
}

In this example we define a state called "hidden" which sets the hidden attribute to true whenever this state is applied. Next, we define a new condition in the conditions field that sets the "hidden" state by using a condition that checks whether viewCount is equal to 0. Now, whenever viewCount equals 0, the state "hidden" will be applied to the myText layer, which then sets the hidden field to true, effectively hiding the entire layer.
This is especially useful when alternating between two layers, like a clickable button in an online shop that should only be visible when there are items in the cart and a gray unclickable button when the item count is 0 instead.

Event conditions​

Conditions can also be used to execute different actions inside of an event. The general event structure for a global event should look as follows:

{
  "name": "myEvent",
  "content": {
    "type": "myEvent",
    "actions": [
      {
        "type": "myEvent",
        "conditions": {
          "left": {
            "context": "parameter",
            "field": "viewCount"
          },
          "mode": "greaterThan",
          "right": "0"
        },
        "actions": [
          {
            "type": "showMessage",
            "params": {
              "text": "There have been {{viewCount}} views so far."
            }
          }
        ],
        "elseActions": [
          {
            "type": "showMessage",
            "params": {
              "text": "There have been no views so far."
            }
          }
        ]
      }
    ]
  }
}

In case the condition inside the conditions field is met, actions will be executed (and optionally, elseActions will be executed otherwise).

Apart from the usual conditions field also seen earlier in the layer state conditions example, we may also define a leadingDelimiter and trailingDelimiter to access data passed to the event when the event is placed inside a template. A more detailed example for this usecase can be found in the event documentation.

If-Else conditions​

An if-else condition is similar to an event condition but can be executed directly in a list of actions without the need to trigger an event first. The overall structure is identical to that of an event condition, with the condition field holding the actual condition and then holding the actions that are to be executed in case the condition is met (and optionally, else to execute actions if the condition is not met).

{
  "actions": [
    {
      "type": "if",
      "params": {
        "condition": {
          "left": {
            "context": "parameter",
            "field": "viewCount"
          },
          "mode": "greaterThan",
          "right": "0"
        },
        "then": [
          {
            "type": "showMessage",
            "params": {
              "text": "There have been {{viewCount}} views so far."
            }
          }
        ],
        "else": [
          {
            "type": "showMessage",
            "params": {
              "text": "There have been no views so far."
            }
          }
        ]
      }
    }
  ]
}

True Value - False Value​

The trueValue field is returned if the condition would return true. The falseValue field is returned if the condition would return false.

Both the trueValue and falseValue fields can contain a string or an evaluable.