Conditionally displaying variables in collection display templates

[JohJonker]

Summary

Display templates for collections currently allow basic variables. Allowing the conditional display of variables (specifically: introducing an "OR" operator) in the display template would make it even more powerful, especially for page builder use cases.

Basic Example

Assume that I have a page builder collection heading with three fields: text (required), type (required — 'h1', 'h2', 'h3'), and description (optional). I want to summarise the heading using the display template, so that the user can easily understand which heading it refers to in a page structure. If the user specifies a description, that should always take precedence. However, if the user doesn't specify a description, the heading text should be shown instead.

Currently, this does not seem to be possible. It requires 'ugly' workarounds like making the display template {{description}} | {{text}}, which renders as "| Lorem ipsum" if text is specified without a description.

Motivation

Display templates for collections are a great way to summarise an instance of that collection's content. In an enterprise page builder setup, where a page will have many different components, it's important to make it easy for the user to quickly find the component they're looking for. The fact that display templates allow variables is already powerful, but conditionally displaying variables will take this to a new level.

Detailed Design

The minimum version of this would be to introduce an "OR" operator, e.g. {{description || text}} in the aforementioned example. A more advanced version could include ternary operator-style expressions, e.g. {{type === 'h1' ? 'Page title: ' : ''}} or {{type === 'h1' ? description : text}}.

Requirements List

Must Have:

• Conditional (OR) operator support

Should Have:

• N/A

Could Have:

• Ternary operator support
• Other logical operators

Won't Have:

• N/A

Drawbacks

I'm guessing that this relates back to the foundational design of variables in input fields, so changing it for display templates may have unintended effects elsewhere, though I can't really see how it would be anything other than an improvement.

Alternatives

Ugly text-based workarounds like {{description}} | {{text}} which leave text artefacts if a variable is blank. This does not make for a great UX.

Adoption Strategy

Since the use of the new operator(s) would be optional, this won't be a breaking change, and no existing values would be impacted.

Unresolved Questions

No response

[diogoterremoto]

Would really like ternary operator-style expressions. My current approach is to join them all without spaces {{description}}{{text}} and if description is empty, there are no spaces before text.