Conditional Logic Examples
Your in depth guide to working with conditional logic in Handlebars
Note: This article is about creating conditional logic in your Content layouts and Page layouts and is separate to the Conditional Elements feature in TerminalfourMastering conditional logic in your content layouts is crucial for creating dynamic, intelligent layouts that respond to your content's actual needs rather than following rigid, predefined patterns.
While Content types and layouts provide the structure for your data, conditional logic acts as the decision-making engine that determines exactly how and when that content should be displayed. By implementing various logical operators and comparisons—from simple presence checks to complex combinations of conditions—you can create sophisticated content layouts that adapt to different scenarios. You can prevent layouts from breaking when optional elements are missing. Or simply create more flexible and robust layouts that meet the needs of your content editors.
This fundamental but powerful feature of Handlebars enables content layouts to make smart decisions about content presentation, giving you full control of how your content is output.
In this guide we’ll walk you through several practical examples of conditional logic using Handlebars in Terminalfour to give you some inspiration and pointers for your own implementations.
Check element contains content
You may only want to output some content if a content editor explicitly adds some content to the element. If it’s blank, then nothing should be output.
The built-in ifSet Helper is designed for exactly this purpose:
What this code is doing:
- First, we open our “Block level expression” with
{{#ifSet}} - We use this ifSet Helper to check if the “Title” element contains any value.
- If it does, we output a
h2element and we output theTitleelement’s content - Notice that we “Close” our “Block level expression” with the
{{/ifSet}}
Supporting “Else”
Before closing our Block level expression we always have the option to add an {{else}} to determine what should happen if the condition is NOT true.
For example, let’s add a fallback title if a user hasn’t explicitly added one:
What this code is doing:
- Like the first example, we start by opening our “Block level expression” with
{{#ifSet}} - We use this ifSet Helper to check if the “Title” element contains any value.
- If it does, we output a
h2element and we output theTitleelement’s content - OTHERWISE (else) we output a
h2element and some default Title text “Default Section Title” - Notice that we then “Close” our “Block level expression” with the
{{/ifSet}}last.
Note: Only one {{else}} can be used per Block level expression.
Check if multiple elements all contain content (AND logic)
You may want to output content only if several different elements contain a value. If any of the elements you passed doesn’t contain a value then nothing should be output.
You can combine the and Helper with the ifSet Helper to enable this.
External Link Example
In this example we only want to output a link if the External Link URL element, AND the External Link Text element both contain values:
What this code is doing:
- We use the and Helper to check multiple conditions at the same time
- In this example we’re performing 2 checks, but you can perform as many checks as required by continuing to pass in more arguments
- We check if the “External Link URL” AND the “External Link Text” elements are both filled out.
- If they are we’ll output a link
Image with Caption Example
You may want to output an image only if it also contains a caption.
What this code is doing:
- We use the and Helper to check multiple conditions at the same time
- In this example we’re performing 2 checks, but you can perform as many checks as required by passing in more arguments
- We check if the “Select Image” AND the “Image Caption” elements are both filled out.
- If they are we’ll output a
figureelement and its correspondingfigcaption
Check if at least one of multiple elements contain content (OR logic)
You may want to output content if at least one of several different elements contain a value. If one of the elements you passed doesn’t contain a value then that’s OK, so long as there’s at least one that does.
You can combine the or Helper with the ifSet Helper to check for this.
Display a “Contact” Section if the “Email Address” OR “Phone Number” elements contain content
In this example we want to output a Section with contact details but only if the “Email Address” or “Phone Number” elements contain content. If neither contain content, nothing should be output.
What this code is doing:
- We use the or Helper to check multiple conditions at the same time
- In this examples we’re performing 2 checks, but you can perform as many checks as required by passing in more arguments
- We check if either the “Phone Number” OR “Email Address” elements are filled out
- If at least one is, we’ll output a
sectionelement and a “Contact” heading
Check if something is not true (NOT logic)
The not Helper can be used to check the inverse of an expression is true.
Not Preview Example
You may want to only output content if you’re on the Published Page but not in preview mode.
While it’s possible to use the {{else}} within the Block level preview expression like so:
What if you only want the “ELSE” and plan to output nothing in preview?
The not Helper allows you to do so:
What this code is doing:
- We use the not Helper to verify we’re NOT in Preview mode
- If we’re NOT in preview we output a
ptag
Show contact form if the “Phone Number” elements is NOT set
We can choose to embed a contact form only if the Phone Number element has no value:
What this code is doing:
- Uses the ifSet Helper to check if the “Phone Number” element contains a value
- Passes that into the not Helper to check the opposite (that there’s nothing entered in the Phone Number element)
- If this is the case, we output the Contact Form
Comparing Values
There are a number of Conditional Operators that allow you to compare different strings/values with other values. Most practically this can be used to compare user provided content, with expected values so you can alter your layouts accordingly.
These comparison operators are:
- eq - Tests if two values are equal
- neq - Tests if two values are not equal
- gt - Tests if one value is greater than the next value
- gte - Tests if one value is greater than or equal to the next value
- lt - Tests if one value is less than the next value
- lte - Tests if one value is less than or equal to the next value
Two values are equal (Eq)
To check if two values are equal you can use the eq Helper like so:
This example will always return “The two strings are not equal” because the first argument “String One” is not equal to the second argument “String Two”.
With user provided data it may look like this:
Now, if the content editor enters “String Two” in the “Title” element, we’ll get a match and “The two strings are equal” will be output.
Two values are not equal (Neq)
To check if two values are not equal you can use the neq Helper like so:
This example will always return “The two strings are not equal” because the first argument “String One” is not equal to the second argument “String Two”.
With user provided data it may look like this:
Now, if the content editor enters anything other than the exact string “String Two” in the “Title” element, we’ll see that “The two strings are not equal” will be output.
One value is greater than the next value (gt)
To check if one value is greater than the next value, you can use the gt Helper like so:
This example will always return “5 is not greater than 6” because the first argument “5” is not greater than the second argument “6”.
With user provided data it may look like this:
Now, if the content editor enters any number larger than 6 in the “Enter Number” element, we’ll see that “User provided number is greater than 6” will be output.
One value is greater than OR Equal to the next value (gte)
The gte Helper is very similar to the gt Helper. The difference is that the gt will return false if the two parameters passed are equal, where as gte will return true in that scenario.
For example:
Will return FALSE
Whereas:
will return TRUE
One value is less than the next value (lt)
To check if one value is less than the next value, you can use the lt Helper like so:
This example will always return “5 is less than 6” because the first argument “5” is less than the second argument “6”.
With user provided data it may look like this:
Now, if the content editor enters any number smaller than 6 in the “Enter Number” element, we’ll see that “User provided number is less than 6” will be output.
One value is less than OR Equal to the next value (lte)
The lte Helper is very similar to the lt Helper. The difference is that the lt will return false if the two parameters passed are equal, where as lte will return true in that scenario.
For example:
Will return FALSE
Whereas:
will return TRUE
Combining Different Logical Operators
In each of the examples above we’ve shown how you can use individual Conditional Logic operators in Handlebars to control your output.
But these can be combined in multitudes of different ways to get the exact output you need.
Here’s a brief list of some examples and the corresponding Handlebars code required:
- Display location map only if physical address is provided OR virtual attendance link is NOT present
- Show contact details if (phone OR email is provided) AND contact permission is granted
- Display resources section if (Document is selected) AND NOT marked as internal-only
- Output staff profile if employment status is active AND (department OR position is specified) AND Employment type NOT marked as temporary