Expression syntax

In the expression editor and in the properties in the properties panel, you write expressions as code. This page shows how to write values, names, operators and functions. How to open the expression editor is explained in Use the expression editor.

Values

• Numbers: 20 or 3.5, with a dot as the decimal separator.
• True or false: true or false.
• Text: in backticks, for example `Hello`. Quotation marks like "Hello" work too, but you can only insert values in backticks (see below).
• Colors: as a hex code in backticks, for example `#0050ff`.

Backticks are slanted quotation marks: `. On a US or UK keyboard, the key is to the left of 1.

More on this in Static values.

Names

• Variable: to use the value of an input field, write its variable name, for example price.
• Value of an element: write the element's name as it appears in the layers panel, a dot and the value, for example headline.bottom. Which values there are is listed in Element values in expressions.

Variables and elements need different names, so that it is clear which one you mean.

Calculate and compare

• Calculate with + (plus), - (minus), * (times) and / (divided by). For example, price * 1.19 multiplies the price by 1.19.
• Compare with == (equal to), != (not equal to), > (greater than), < (less than), >= (greater than or equal to) and <= (less than or equal to). A comparison gives true or false, for example price > 100.

Functions

Functions are written in capitals, with their values in parentheses, separated by commas: FLOOR(price), ADD(headline.width, 40) or IF(isMember, `Member`, `Guest`).

To get whole numbers, use CEIL (round up), FLOOR (round down) or TRUNC (cut off the decimals).

All functions are listed in the Overview of expression functions.

Values inside text

• In the expression editor, write the text in backticks and each value in ${...}: `Total: ${price} EUR`.
• In a text property in the properties panel, such as Content, just type Total: ${price} EUR. Bluepic adds the backticks for you.

A number property such as Y calculates headline.bottom + 20 directly. If you type the same thing into a text property, it stays text and is not calculated. In a color property such as Fill Color, too, everything you type counts as text. So you write expressions for colors in the expression editor.

If an entry in the properties panel contains an error, the property shows a red message and does not apply it. When you click somewhere else, the property shows the last valid value again.