IF / ELSE logic: switch between two outcomes

In the template editor, you use the IF function to let a property switch between two values, depending on what users enter in the design generator. In this guide, a checkbox shows a dark bar behind a text. When the bar is visible, the text turns white, and black otherwise. For this, you need the bar behind the text and a checkbox input field that shows and hides it. How to create this input field is explained in Create a checkbox input field: let users show or hide an element.

This takes two steps:

1. Write the expression in the template editor.
2. Test the result in the design generator.

Write the expression

1. Look up the name of your checkbox input field under Variable name in its settings in the Input Fields view. In this guide, it is called showBar. How to open the settings is explained in Input field settings.
2. Click the italic fx in the toolbar at the top. This is the Connect expressions tool.
   
3. Click the text whose color should switch, on the canvas or in the layers panel. The properties panel shows its properties.
4. Click the color value under Fill Color in the Appearance section of the properties panel. The expression editor opens as a popup.
   
5. Click the angle brackets at the top right of the expression editor. The code view opens.
6. Type this expression in place of the current content: IF(showBar, `#ffffff`, `#000000`). Put the variable name of your checkbox input field in place of showBar. The text is now white when the bar is visible, and black otherwise.
   A small red box appears at the top right?

   The expression contains a typo, for example a missing bracket, a missing comma or a missing backtick around a color. As long as the box is there, Bluepic does not apply your change.

   The color doesn't change?

   Bluepic only applies an expression when it knows every name in it. If the variable name is misspelled, the old color stays, without a message. Compare the name with Variable name, including upper and lower case.

7. Click × at the top left. The expression editor closes. Your change is already applied.

IF always has three parts: the condition, the value if it is true, and the value if it is false. Instead of a checkbox, the condition can also be a comparison or a check:

• price > 100: true if the number price is greater than 100.
• IS_EMPTY_STRING(subtitle): true if the text subtitle is empty.
• NOT(…), AND(…) and OR(…): reverse a condition or combine several.

For IF, the number 0 also counts as true. So check numbers with a comparison like count > 0. For more than two outcomes, put one IF inside another or use SWITCH. Both are in the Overview of expression functions.

In the visual view, the expression editor shows the three parts of IF as blocks.

Test the result in the design generator

The design generator is the page where users fill in your template and export their design. You can test the expression there safely: whatever you choose doesn't change your template permanently.

1. Click Share at the top right and then Publish Template Link. A popup with the share settings opens. Your template can now be reached through a link.
2. Click Copy URL and open the link in a new browser tab. The design generator opens.
3. Click the checkbox. Check that the bar appears and the text turns white, and that the text is black again on the next click.