Expression not working?

In the template editor, Bluepic shows you when an expression doesn't work: with a warning icon in the layers panel, a message on the canvas or a red property in the properties panel. Some problems Bluepic doesn't show at all. Pick what you see below. The causes are listed from the most to the least common.

A warning icon appears next to an element?

A yellow warning triangle next to the name in the layers panel means: an expression of this element can't be worked out. At the top of the canvas, the first two messages appear as well. Dismiss hides them until a new problem comes up. Bluepic only checks the open canvas. If your template has several canvases, open each one once.

1. Move the mouse over the warning icon in the layers panel. The message appears. After it, in brackets, is the expression it is about, for example (in: headline.width > 500).
   

An element was deleted

The message reads, for example, "Cannot read properties of undefined (reading 'width')". The expression uses the name of an element that no longer exists. When you delete an element, Bluepic turns references in X, Y, W and H into fixed numbers. Other properties such as colors, Opacity or Visibility keep the reference.

If you have only just deleted the element, undo the deletion (Cmd + Z, on Windows Ctrl + Z). Otherwise:

1. Click the element with the warning icon in the layers panel. The properties panel shows its properties.
2. Move the mouse over the property with the expression from the message in the properties panel. A menu with Edit expression opens.
3. Depending on what the property should do:
   • It should keep depending on an element:
     • Click Edit expression. The expression editor opens.
     • Replace the old name with the name of an element that exists.
   • A fixed value is enough:
     • Type the value straight into the property, for example #000000 for a color.
   
   The warning icon disappears.

Resolve expression doesn't help here. Bluepic can't work out the expression and reports "Error resolving expression".

Two elements depend on each other in a circle

The message starts with "Circular dependency between expressions" and names the properties involved, for example headline.y → caption.y → headline.y. Sometimes it reads "Expression evaluation storm". Every element in the circle has the warning icon. This happens when, for example, the headline follows the caption and the caption follows the headline. Let only one of the two follow the other:

1. Click the anchor in the toolbar at the top. This is the Anchoring tool.
   
2. Click the element that should not follow on the canvas. Its connections appear.
3. Click the × on the connection to the other element. The connection is removed, and the element stays where it is.

If no connection appears, the expression is not a simple connection. Then type a fixed number into the property from the message in the properties panel, for example 300 in Y. The element stays in that place and no longer follows the other one.

A text's width is not a number

The message starts with "Text wrap width is not a finite number" or "Line breaking could not judge". The text's W is an expression that doesn't give a number. Bluepic then sets the text without line breaks.

1. Click the text with the warning icon in the layers panel. The properties panel shows its properties.
2. Type a fixed width into W under Size in the properties panel, for example 600. The text wraps again.

The expression contains code that Bluepic doesn't run

The message starts with "Expression rejected by safety validator". Expressions look like the programming language JavaScript, and many code samples on the internet are written in JavaScript. For safety reasons, Bluepic doesn't run all of it, which often happens with a copied code sample. Open the expression with Edit expression and rewrite it with the functions from the Overview of expression functions.

A property turns red while you type?

When you type an expression into a property in the properties panel, Bluepic checks it with every character. If it has an error, the property turns red and a message appears next to it. While you are typing, that is normal. Bluepic only applies expressions without errors. When you click somewhere else, the property shows the last value that worked again.

A name is misspelled

The message ends with "is not defined", for example "headlin is not defined". Bluepic doesn't know the name. This also applies to functions: FLOR instead of FLOOR gives "FLOR is not defined".

1. Compare the name with the element's name in the layers panel or with the input field's Variable name in the Input Fields view. Upper and lower case matter.
2. Correct the name in the property. The property is no longer red.

A character is missing or one too many

The message starts with "Error parsing expression".

1. Check that every bracket is closed, values are separated by commas and text and colors are in backticks.
2. Correct that spot. The property is no longer red.

A color doesn't get a color value

The message reads "Invalid color". In a color property such as Fill Color, everything you type counts as text. A color code needs a # at the start. An expression like IF(…) doesn't give a color there. Write expressions for colors in the expression editor:

1. Click the italic fx in the toolbar at the top. This is the Connect expressions tool.
2. Click the color value in the properties panel. The expression editor opens. IF / ELSE logic: switch between two outcomes shows how to go on.

The expression shows up as text in the design?

In a text property such as Content, everything you type counts as text. If you type headline.width, exactly that appears in the design.

1. Write the part that should be worked out inside ${…}, for example Width: ${headline.width}. The design now shows the value. Expression syntax explains more.

An element no longer moves along, or sits in the wrong place?

You connected an element to another one with an expression, for example with headline.bottom + 20 in Y. Now it no longer moves along when the other element grows or moves, or it sits in a completely different place. For these cases, Bluepic shows neither a warning icon nor a message.

The other element was deleted

When you delete an element, Bluepic turns every X, Y, W and H that refers to it into a fixed number. The other elements stay where they are but no longer follow anything. Undo the deletion, or connect the elements again as described in Dynamic text layouts with expressions.

The elements sit in different groups

The element follows, but sits somewhere else entirely. The values of an element inside a group are measured from the group, not from the canvas. Put both elements in the same group, or both outside of groups. Or connect them with the anchoring tool. It takes groups into account by itself.

The other element is rotated or scaled

The plain values such as logo.right leave out an element's rotation and scaling. Use the values with .bbox instead, for example logo.bbox.right + 20. Element metadata (sub-properties) explains more.

The expression was turned into a fixed value

Resolve expression replaces an expression with its current result. After that, the property no longer reacts to anything. Undo that step, or enter the expression again.

Changes in the expression editor aren't applied?

In the expression editor, Bluepic applies every change without errors right away, and changes with errors not at all. When you close the expression editor, the last expression that worked stays.

A character is missing or one too many

In the code view, a small red box appears at the top right.

1. Check that every bracket is closed, values are separated by commas and text and colors are in backticks.
2. Correct that spot. The red box disappears, and Bluepic applies the change.

A name is misspelled

Bluepic shows no message here. The expression simply stays as it was.

1. Compare every name in the expression with the Elements, Variables and Functions tabs in the visual view. Upper and lower case matter.
2. Correct the name. Bluepic applies the change.