Retrofitting Handlebars, Conditionals and Repeaters to your existing implementations

The introduction of Handlebars, Repeater Elements and Conditional Elements functionality in version 8.4 has improved the developer and content editing experience for users. But how do you make use of these features in your existing content types?

This training module will guide you step by step through retrofitting Repeater and Conditional elements into existing content types and page layouts, along with key considerations to keep in mind along the way.

What is Handlebars?

Handlebars in Terminalfour is implemented using handlebars.java, a Java implementation of the widely used handlebars.js templating engine. Because Handlebars is an open-source templating standard adopted by many frameworks and platforms, many developers are already familiar with its syntax and functionality. This makes it easier to create and maintain reusable templates within Terminalfour.

How Handlebars works

Instead of hard-coding values into your HTML, you create a template with Handlebars expressions. These expressions are enclosed in double curly braces ({{ }}).

For example, the template:

<h1>Hello, {{publish element="Name"}}!</h1>
<p>You have {{publish element="Message count"}} new messages.</p>

contains two expressions: {{publish element="Name"}} and {{publish element="Message count"}}.

When the template is run, Handlebars replaces each expression with the corresponding value from the data provided.

Key advantages of using Handlebars

• Separation of content and logic: Keeps HTML templates separate from application code, making projects easier to organize and maintain.
• Reusable templates: Supports partials and reusable components, reducing duplicated code and improving consistency.
• Easy to read and write: Uses simple placeholder syntax ({{ }}), making templates accessible to both developers and non-developers.
• Dynamic content: Automatically inserts data into templates, allowing the same template to generate different outputs.
• Extensible: Custom helpers can be created to add formatting and other reusable functionality.
• Improved maintainability: Changes to the layout or presentation can often be made in the template without modifying the underlying application logic.

What is a Helper?

A helper is a function that you can use within a template, such as a Page Layout or Content Layout, to perform a specific task, process data, or output a value. For example, helpers can format dates, convert text to uppercase, or display the contents of Content Elements.

Terminalfour includes a wide range of built-in helpers that you can use when creating Page Layouts and Content Layouts. These helpers simplify common tasks, reduce the amount of custom code required, and make your templates easier to maintain.

To learn about all available built-in helpers, see the Getting Started with Handlebars page in our Knowledge Base.

The Handlebars Expression Builder

Terminalfour 8.4.2 introduced a new UI to help you generate Handlebars Expressions. The expression builder helps you generate the most commonly used Handlebars Expressions.

Handlebars Expressions can be added to Page Layouts and Content Layouts using the Generate Handlebars Expression button from Page Layouts and Content Types.

The "Generate Handlebars Expression" button is visible when the Layout Processor is set to "Handlebars".

Different types of expressions

An expression is any content enclosed within double curly braces ({{...}}). An expression can contain a variable, a helper, or a combination of both. During template rendering, Handlebars evaluates each expression and replaces it with the corresponding output in the final HTML.

Standard expression

{{publish element="Title"}}

{{sectionName}}

Block-level expression

A block-level expression is an expression that uses both an opening tag and a closing tag, similar to HTML tags, to define a section of content. The content enclosed within the block is processed according to the expression's logic. Block-level expressions are commonly used to control how content is rendered, such as by applying conditional logic, repeating content in loops, or executing custom processing for everything contained within the block.

{{#preview}}
  <p>This will only get output when the page is previewed.</p>
{{/preview}}

Common use cases:

Conditionals

Display a value only when a specified condition is true.

{{#ifSet element="Heading"}}
  <p>This is only output if the Heading element is set</p>
{{/ifSet}}

Loops

Iterate through an array and output data for each item

{{#each (list element="Department")}}
  <p>Department name: {{name}}</p>
{{/each}}

Subexpression

A subexpression is an expression contained within another expression. Use a subexpression when you need to perform a helper function or calculation as part of a larger expression. Subexpressions are enclosed in parentheses.

{{upper (publish element="Title")}}

Double stashing and triple stashing

Handlebars provides two ways to output values in a template: double stash ({{...}}) and triple stash ({{{...}}}).

• Double stash ({{...}}) automatically HTML-escapes the output. This means special characters, such as <, >, and &, are converted to their HTML-safe equivalents before being rendered. Use double stash for most content, especially user-provided data, to help prevent unintended HTML rendering.
• Triple stash ({{{...}}}) outputs the value without HTML escaping. If the value contains HTML markup, it is rendered as HTML rather than displayed as plain text. Use triple stash only when the content is trusted and is intended to include HTML.

Handlebars
Handlebars escapes HTML by default when using double-stash ({{ }}) syntax. Special characters like <, >, and & are converted to their HTML entity equivalents (e.g., <h2>Test</h2> becomes <h2>Test</h2>).

T4 Tags
Traditional T4 tags output content exactly as entered — no HTML escaping occurs. If a user enters <h2>Test</h2> into an element, that markup is output as-is and rendered as HTML.

Unlike Handlebars' double-stash, which escapes HTML automatically by default, T4 tags never escape anything unless you explicitly add a modifier. The relevant one is:

- htmlentities — Converts un-encoded special characters to their HTML equivalent (e.g. < → <), same outcome as Handlebars' default double-stash escaping.
- striptags — Removes HTML tags entirely (a different behaviour — not escaping, but stripping).

These are typically used together in a T4 tag like:

<t4 type="content" name="Heading" output="normal" modifiers="striptags, htmlentities" />

- Double-stash {{publish element="Title"}} → escapes the output. If the user entered <h2>Test</h2>, it renders literally as text <h2>Test</h2> on the page rather than as actual HTML.
- Triple-stash {{{publish element="Title"}}} → does not escape the output, behaving like a traditional T4 tag. The value <h2>Test</h2> would render as an actual <h2> heading.

Common use cases for triple-stashing

• If you need to output the data as HTML (for example, if you're using a HTML element)

{{{publish element="Main body"}}}

• If it's a Plain text element being used to output "Code" then you would use triple curly braces {{{ }}}.

{{{publish element="Code"}}}

• Outputting a file from the media library (images, css, javascript, etc.)

{{{media id="123" layout="css/*"}}}

Error handling

Like with standard T4 tag based layouts and programmable layouts it's possible to configure things incorrectly and get undesired or unexpected results.

Preview & Direct Edit

When an error is encountered with a Handlebars layout during Preview or Direct Edit we output an inline error message on the page to users.

This error is in the form of a table and displays the following info:

1. The Section ID where the error is occurring
2. The asset language
3. The Content ID (if applicable)
4. The error message
5. The content layout name (if applicable)
6. The layout code (if applicable)

This should give you enough information to find out where the problem exists so you can debug.

Example:

Publish

• When a Publish happens and an error is encountered:
  • The publish stops to prevent breaking the live site.
  • This means if you accidentally introduce a breaking error in your content type or page layout, we'll prevent that error from getting pushed to your live site and ultimately breaking a significant portion of your web pages.
• When the publish fails it does so with very clear messaging in the logs explaining the reason for the failure.

Example

Training Site Setup

Begin by setting up your training instance to complete the exercises in this course. Follow your trainer's instructions to configure your site structure, duplicate an existing page layout, and create a channel for your training website.

Complete the following setup tasks for your training website:

- Navigate to the training site by opening up the following URL in your web browser: https://training.terminalfour.net/terminalfour/login.jsp
- Log in using the username and password provided by your trainer.
- Create a site structure that includes a parent folder named with your name and a Home section beneath it.
- Duplicate the HCR Training Site Example: Main Layout Page Layout.
- Create a channel for your training website.

Page Layout conversion

Before updating the page layout to use Handlebars, change the layout processor to Handlebars Page.

How to update the layout processor

1. Go to Assets > Page Layouts.
2. Click your page layout name to edit it. (Use the Filter tool to search). 
3. General information tab:
   1. Name: the name assigned to your page layout.
   2. Description: the description of your page layout.
   3. File Extension: Default - unless this is used with a different File Extension. This requires other extensions being permitted in the Channel.
   4. Syntax Type: HTML/XML – this determines which syntax is highlighted.
   5. Layout processor: update the layout processor to Handlebars Page.
   6. Primary Group: restricts the availability of the asset to this group.
4. Click Save changes to save the changes to your page layout.
5. Update your preview to check the result.

Preview the page and observe the result. After changing the layout processor to Handlebars Page, the browser no longer renders values for the remaining T4 tags in the page layout. This is because T4 tags are processed by the Terminalfour publishing engine and have no meaning to a web browser.

Your next task is to replace the remaining T4 tags with the appropriate Handlebars expressions so the page can be rendered correctly.

Open the page layout and navigate to the Header Code / Footer Code tabs. Use the search function (Ctrl+F) to search for t4 type and locate the remaining T4 tags that need to be converted to Handlebars expressions.

Your search should return the following T4 tags.

Header code tab:

1. <t4 type="title" />
2. <t4 type="media" id="10859" formatter="css/*" />
3. <t4 type="navigation" name="T201 Training Site Example: Main/Top Link Menu" id="258" />

Footer code tab:

1. <t4 type="title" />
2. <t4 type="edit-page" action="direct-edit" text="Edit this page" />

These are the remaining T4 tags that need to be converted to their equivalent Handlebars expressions.

How to output the section name with Handlebars

1. Go to Assets > Page Layouts.
2. Click your page layout name to edit it. (Use the Filter tool to search).
3. Open the </> Header code tab. 
4. Click on the </> Generate Handlebars Expression button.
5. Open the Section tab.
   1. Section metadata: leave Section name selected. This option uses the sectionName helper to output the name of the current section.
      
      sectionName Helper
      
      Used to output the name of the current section.
      
      Usage:
      {{sectionName}}
6. Copy the Handlebars expression and replace the existing <t4 type="title" /> tag as shown below:

<title>{{sectionName}} - Terminalfour University</title>

7. The <t4 type="title" /> tag is also used in the footer code. Click into the </>Footer code tab and replace it there with the same Handlebars expression.
8. Click Save changes to save the updates to your page layout.
9. Update your preview to check the result.

How to link to a CSS file with Handlebars

Next, you will learn how to update a T4 tag in the page layout that references a CSS file in the Media Library.

1. Go to Assets > Page Layouts.
2. Click your page layout name to edit it. (Use the Filter tool to search).
3. Open the </> Header code tab.
4. Click on the </> Generate Handlebars Expression button.
5. Open the Media tab.
6. Click the Select media button to open up the media library. 
7. Navigate to the folder where the CSS file is located and select the CSS file.
8. Media Output: Select the media layout to apply to CSS files. Select css/* from the drop-down.

The Handlebars expression uses the media helper to output the CSS file.

media Helper

The media helper is a simple helper that allows you to output an item from the media library.

Usage:
{{{media id="123" layout="image/normal"}}}

9. Click Copy to clipboard, then paste the Handlebars expression into your page layout, replacing the existing T4 tag. 

10. Click Save changes to save the updates to your page layout.
11. Update your preview to check the result.

How to output the link menu with Handlebars

1. Go to Assets > Page Layouts.
2. Click your page layout name to edit it. (Use the Filter tool to search).
3. Open the </> Header code tab.
4. Click on the </> Generate Handlebars Expression button.
5. Open the Navigation tab.
   1. Restrict navigation objects by type: select "Link Menu". This acts as a filter facilitating the search for your navigation object.
   2. Available navigation objects: find the name of your navigation object (T201 Training Site Example: Main/Top Link Menu) and select it. Once selected the expression builder will generate a Handlebars expression that uses the nav Helper.
      
      nav Helper
      
      The nav helper is a simple helper that allows you to output a navigation object.
      
      Usage:
      {{nav name="My Navigation Object" id="123"}}
6. Copy the Handlebars expression and replace the existing T4 link menu navigation tag. The expression should look similar to the example below:

{{nav name="T201 Training Site Example: Main/Top Link Menu" id="258"}}

7. Click Save changes to save the updates to your page layout.
8. Update your preview to check the result.

How to output a link to Direct Edit with Handlebars

1. Go to Assets > Page Layouts.
2. Click your page layout name to edit it. (Use the Filter tool to search).
3. Open the </> Footer code tab. 
4. Click on the </> Generate Handlebars Expression button.
5. Open the Section tab.
   1. Section links: select the Direct edit section link radio button. This option uses the directEditSection helper to output the path to Direct Edit.
      
      directEditSection Helper
      
      Used to output the path to Direct Edit.
      
      Usage:
      {{directEditSection}}
6. Copy the Handlebars expression and replace the existing <t4 type="edit-page" action="direct-edit" text="Edit this page" /> tag with it, as shown below:

<li><a href="{{directEditSection}}">Edit this page</a></li>

7. Click Save changes to save the updates to your page layout.
8. Update your preview to check the result.

News Content Type conversion

Complete the following setup tasks for your training website:

- Create a News section in your site structure.
- Duplicate the HCR Training Site Example: News item Content Type.
- Enable the Content Type in your News section.
- Create a sample news story to verify that the Content Type is working correctly.

In this section, you will learn how to update a News Content Type that is built entirely with T4 tags. The News Content Type includes two distinct content layouts:

• text/html – Displays the default view, which lists available news items.
• text/fulltext – Displays the full-text view of an individual news item.

You will learn how each layout is structured and how to update them using Handlebars expressions.

How to update the "text/html" content layout to Handlebars

1. Go to Assets > Content Types.
2. Click your content type name to edit it. (Use the Filter tool to search).  Open the content layouts tab.
3. The content layouts tab is an area to add content layout(s) for your content type. Click into the "text/html" default content layout to edit it.
4. Click into the General information tab.
5. Name: "text/html" - this is the default Type set in the Channel. This ensures the content can be displayed.
6. File Extension: Default - unless this is used with a different File Extension. This requires other extensions being permitted in the Channel.
7. Syntax Type: HTML/XML – this determines which syntax is highlighted.
8. Content layout processor: update the content layout processor to Handlebars Content.
9. Click Save changes to save the updates to your content type.
10. Update your preview to check the result.

In the Content layouts tab click into the text/html content layout. Use the search function (Ctrl+F) to search for t4 type and locate the T4 tags that need to be converted to Handlebars expressions.

Your search should return the following T4 tags.

1. The URL of the fulltext link: <t4 type="content" name="Name" output="fulltext" use-element="true" filename-element="Headline" modifiers="striptags,htmlentities" />
2. The clickable text of the URL link (Heading element): <t4 type="content" name="Headline" output="normal" modifiers="striptags,htmlentities" />
3. The "Release date" element: <t4 type="content" name="Release date" output="normal" date_format="EEEE, MMMM d, yyyy" />
4. The "Teaser" element: <t4 type="content" name="Teaser" output="normal" modifiers="striptags,htmlentities" />

How to output the fulltext link in Handlebars

1. Click the </> Generate Handlebars Expression button.
2. In the Content tab:
   
   1. Information to output (select the Fulltext radio button)
      1. Element: the Element option is used to output elements to the page.
      2. Metadata: the Metadata option allows output of specific Metadata (HTML anchor, Content ID, Last Modified Date, Publish Date, etc.).
      3. Fulltext: used to output a fulltext link.
   2. Fulltext:
      1. Fulltext Link (Outputs a fulltext link)
      2. Fulltext URL (Outputs the path of the fulltext link only)
3. Click Copy to clipboard to copy the Handlebars expression.
4. Replace the T4 tag in the href attribute of the link with the appropriate Handlebars expression. The resulting code should look like the following:

<h3><a href="{{fulltextURL}}"><t4 type="content" name="Headline" output="normal" modifiers="striptags,htmlentities" /></a></h3>

Notice that the fulltextURL helper outputs only the URL for the full-text link. You must also replace the T4 tag that outputs the Headline element, which provides the clickable text for the link.

5. Click the </> Generate Handlebars Expression button again.
6. In the Content tab:
   1. Information to output (select the Element radio button)
      1. Element: the Element option is used to output elements to the page.
      2. Metadata: the Metadata option allows output of specific Metadata (HTML anchor, Content ID, Last Modified Date, Publish Date, etc.).
      3. Fulltext: used to output a fulltext link.
   2. Content element: select the "Headline" element from the content element drop-down.
   3. Handlebars helper: this will be selected by default as the Publish Helper, used to output elements to the page.
   4. Options:
      1.   Convert special characters to their HTML encoded values This is selected by default for Plain Text elements. It ensures that html characters are treated as literal text and not processed as HTML.
      2. Allow this element to be edited inline in Direct Edit Adds the inline-edit="true" to enable inline editing of this element in Direct Edit.
      3. Check if value is set This option will wrap the element with an ifSet Helper. It ensures the element outputs only if it contains data.
7. Click Copy to clipboard to copy the Handlebars expression.
8. Replace the T4 tag within the link with the corresponding Handlebars expression. Once complete, your finished link should look like the example below:

<h3><a href="{{fulltextURL}}">{{publish element="Headline" inline-edit="true"}}</a></h3>

9. In order to have the "Headline" element behave as a friendly URL, select the "Use as filename" radio button of the "Headline" element in the Elements tab of your content type.

10. Click Save changes to update the Content Type.

How to output a date in Handlebars

1. Click the </> Generate Handlebars Expression button again.
2. In the Content tab:
   1. Information to output (select the Element radio button)
      1. Element: the Element option is used to output elements to the page.
      2. Metadata: the Metadata option allows output of specific Metadata (HTML anchor, Content ID, Last Modified Date, Publish Date, etc.).
      3. Fulltext: used to output a fulltext link.
   2. Content element: select the "Release date" element from the content element drop-down.
   3. Handlebars helper: Select the Date format Helper in the drop-down.
   4. Options:
      1.   Convert special characters to their HTML encoded values This is selected by default for Plain Text elements. It ensures that html characters are treated as literal text and not processed as HTML.
      2. Allow this element to be edited inline in Direct Edit Adds the inline-edit="true" to enable inline editing of this element in Direct Edit.
         For date elements this option is disabled as Date elements can't be edited inline in Direct Edit.
      3. Check if value is set This option will wrap the element with an ifSet Helper. It ensures the element outputs only if it contains data.
3. Click Copy to clipboard to copy the Handlebars expression.
   
   {{dateFormat (dateElement element="Release date") "yyyy-MM-dd"}}You can customize how dates are displayed by specifying a date format. For a list of supported date format patterns and examples, refer to the documentation here: Formatting Dates and Times
4. Replace the T4 tag with the corresponding Handlebars expression, as shown below:

<em><strong>{{dateFormat (dateElement element="Release date") "EEEE, MMMM d, yyyy"}}</strong></em>

How to output a plain text element in Handlebars

1. Click the </> Generate Handlebars Expression button again.
2. In the Content tab:
   1. Information to output (select the Element radio button)
      1. Element: the Element option is used to output elements to the page.
      2. Metadata: the Metadata option allows output of specific Metadata (HTML anchor, Content ID, Last Modified Date, Publish Date, etc.).
      3. Fulltext: used to output a fulltext link.
   2. Content element: select the "Teaser" element from the content element drop-down.
   3. Handlebars helper: this will be selected by default as the Publish Helper, used to output elements to the page.
   4. Options:
      1.   Convert special characters to their HTML encoded values This is selected by default for Plain Text elements. It ensures that html characters are treated as literal text and not processed as HTML.
      2. Allow this element to be edited inline in Direct Edit Adds the inline-edit="true" to enable inline editing of this element in Direct Edit.
      3. Check if value is set This option will wrap the element with an ifSet Helper. It ensures the element outputs only if it contains data.
3. Click Copy to clipboard to copy the Handlebars expression and replace the T4 tag for the teaser element.

{{publish element="Teaser" inline-edit="true"}}

4. Click Save changes to save the new content layout. The first part of the content type is complete.

How to update the "text/fulltext" content layout to Handlebars

1. Go to Assets > Content Types.
2. Click your content type name to edit it. (Use the Filter tool to search).  Open the content layouts tab.
3. The content layouts tab is an area to add content layout(s) for your content type. Click into the "text/fulltext" content layout to edit it.
4. Click into the General information tab.
5. Name: "text/fulltext" - this is the default Type set in the Channel. This ensures the content can be displayed.
6. File Extension: Default - unless this is used with a different File Extension. This requires other extensions being permitted in the Channel.
7. Syntax Type: HTML/XML – this determines which syntax is highlighted.
8. Content layout processor: update the content layout processor to Handlebars Content.
9. Click Save changes to save the updates to your content type.
10. Update your preview to check the result.

In the Content layouts tab click into the text/fulltext content layout. Use the search function (Ctrl+F) to search for t4 type and locate the T4 tags that need to be converted to Handlebars expressions.

Your search should return the following T4 tags.

1. The "Headline" element: <t4 type="content" name="Headline" output="normal" modifiers="striptags,htmlentities" />
2. The "Release date" element: <t4 type="content" name="Release date" output="normal" date_format="EEEE, MMMM d, yyyy" />
3. The "Image" element: <t4 type="content" name="Image" output="normal" formatter="image/normal" />
4. The "Image caption" element: <t4 type="content" name="Image caption" output="normal" modifiers="striptags,htmlentities" />
5. The "Teaser" element: <t4 type="content" name="Teaser" output="normal" modifiers="striptags,htmlentities" />
6. The "News story" element: <t4 type="content" name="News story" output="normal" modifiers="medialibrary,nav_sections" />

Updating the T4 tags with Handlebars expressions

1. The T4 tag outputting the "Headline" element needs to be replaced with a Handlebars expression. Use what you have learned to build a Handlebars expression and replace the original T4 tag for the Headline with the new expression.
2. The T4 tag outputting the "Release date" element needs to be replaced with a Handlebars expression. Use what you have learned to build a Handlebars expression to output a date and replace the T4 tag with the new expression.
3.  The T4 tag that outputs the image: <t4 type="content" name="Image" output="normal" formatter="image/normal" /> needs to be replaced with a Handlebars expression. To make that possible, build a Handlebars expression for the "Image" element (You will make use of the media and mediaId Helpers):
4. In the Content tab:
   1. Information to output (select the Element radio button)
      1. Element: the Element option is used to output elements to the page.
      2. Metadata: the Metadata option allows output of specific Metadata (HTML anchor, Content ID, Last Modified Date, Publish Date, etc.).
      3. Fulltext: used to output a fulltext link.
   2. Content element: select the "Image" element from the content element drop-down.
   3. Handlebars helper: select "Media" from the drop-down.
   4. Media Output: select "image/normal" as the layout.
   5. Options:
      1.   Convert special characters to their HTML encoded values This is selected by default for Plain Text elements. It ensures that html characters are treated as literal text and not processed as HTML.
      2. Allow this element to be edited inline in Direct Edit Adds the inline-edit="true" to enable inline editing of this element in Direct Edit.
         For media elements this option is disabled as Media elements can't be edited inline in Direct Edit.
         
      3. Check if value is set This option will wrap the element with an ifSet Helper. It ensures the element outputs only if it contains data.
5. Click Copy to clipboard to copy the Handlebars expression.
6. Replace the original image T4 tag with the new Handlebars expression.
7. The T4 tag that outputs the "Image caption" element needs to be replaced with a Handlebars expression. Use what you have learned to build the expression and replace the T4 tag with the new expression.
8. The T4 tag that outputs the "News Story" element needs to be replaced with a Handlebars expression. Use what you have learned to build the expression and replace the corresponding T4 tag with the new expression.
9. Click Save changes to save the new content layout. The content type is complete.

Page titles

In this exercise, you will learn how to display custom page titles in the <title> tag of your page layout.

You will begin by outputting a Custom Page Title using the Custom Page Title field from the SectionMetaDescription content type.

Next, for full-text pages, you will output a content element from the page layout.

Finally, you will add conditional logic to your code so that the correct page title is displayed based on two factors:

• Whether the content element contains a value.
• Whether the current page is a full-text page.

How to display a custom page title

In this exercise, you will use the Section Helper to output the Custom Page Title field. This field is defined in the SectionMetaDescription content type and is available on the General tab of each section.

1. Go to Assets > Page Layouts.
2. Click your page layout to open it for editing. (Use the Filter tool to locate it if needed.)
3. Open the </> Header code tab.
4. Click </> Generate Handlebars Expression.
5. In the Section tab:
   • Under Section metadata, select the Section meta field radio button.
   • Select Custom Page Title from the drop-down list.
6. Click Copy to clipboard to copy the generated Handlebars expression.
7. Add the Handlebars code to the title tag in the page layout.

<title>{{section field="Custom Page Title"}} - Terminalfour University</title>

8. Click Save Changes to save your updates to the page layout.
9. Refresh the preview to verify that the custom page title is displayed correctly.

How to use the if/else Helpers

1. Go to Assets > Page Layouts.
2. Click your page layout to open it for editing. (Use the Filter tool to locate it if needed.)
3. Open the </> Header code tab.
4. You will use the if helper to determine whether the Custom Page Title field in SectionMetaDescription contains a value. If it does, output the Custom Page Title in the <title> tag. Otherwise, use the else helper to output the section name with the sectionName helper.
5. Click </> Generate Handlebars Expression.
6. Open the </> Misc tab.
7. Select if from the Helpers drop-down list.
8. Click Copy to clipboard, then paste the generated if/else block into the title of the page layout.
9. Modify the generated code as follows::
   1. Update the if condition to check whether the Custom Page Title field contains a value.
   2. Output the Custom Page Title when a value is present.
   3. In the else block, output the section name using the sectionName helper.

{{#if (section field="Custom Page Title")}}
  <title>{{section field="Custom Page Title"}} - Terminalfour University</title>
{{else}}
  <title>{{sectionName}}  - Terminalfour University</title>
{{/if}}

11. Click Save Changes to save your updates to the page layout.
12. Refresh the preview to verify that the correct page title is displayed.

The fulltext Helper (block level variant)

The fulltext Helper is available in both standard and block expression forms, and its behavior depends on how it is used.

When used as a standard expression, the fulltext Helper outputs a link to the full-text page for a specified content type. 

In this exercise, you will use the block expression form of the fulltext Helper. This form allows you to determine whether the current page is a full-text page, enabling you to display different output based on the page type.

How to use the fulltext Helper (block level variant)

1. Go to Assets > Page Layouts.
2. Click your page layout to open it for editing. (Use the Filter tool to locate it if needed.)
3. Open the </> Header code tab.
4. Click </> Generate Handlebars Expression.
5. Open the </> Misc tab.
6. Select fulltext from the Helpers drop-down list.
7. Click Copy to clipboard, then paste the generated fulltext block into the page layout.
8. Update the code to use the fulltext Helper to check whether the current page is a full-text page. When it is, output the Headline element within the <title> tag.

{{#fulltext}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{/if}}

{{/fulltext}}

A great benefit of using the fulltext Helper as a block level expression in page layouts is that you have access to the elements of the content type which is something that isn't possible using t4 tags. This allows you to use the publish Helper to output the "Headline" element of the fulltext content type.

9. Add an else condition to handle cases where the current page is not a full-text page. Within the else block, add the original code created in the How to use the if/else Helpers exercise.

{{#fulltext}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{/if}}

{{else}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} - Terminalfour University</title>
  {{/if}}

{{/fulltext}}

Note that by adding an else condition to the fulltext Helper, you are now also creating a nested if within your logic.

10. Click Save Changes to save your updates to the page layout.
11. Refresh the preview to verify that the correct page title is displayed for both full-text and non-full-text pages.

Canonical URL

Adding a canonical URL to the page layout

1. Go to Assets > Page Layouts.
2. Click your page layout to open it for editing. (Use the Filter tool to locate it if needed.)
3. Open the </> Header code tab.
4. Click </> Generate Handlebars Expression.
5. Open the Channel tab:
   • select the Canonical URL radio button.
6. Click Copy to clipboard to copy the generated Handlebars expression.
7. Insert the Handlebars expression into a canonical URL link like so:
   <link rel="canonical" href="{{canonicalURL}}" />
8. Click Save Changes to save your updates to the page layout.
9. Refresh the preview to verify that the canonical URL is displayed correctly.

Testing the canonical URL using a mirrored section

1. In your site structure mirror your "About" section into your "Life at T4U" section of your website.
2. Click into the actions button of your "About" section and select "Mirror branch". Then select your "Life at T4U" section in the pop-up modal.

3. Preview the mirrored "About" section from your "Life at T4U" section. The Canonical URL should output a link referencing the original URL of the "About" section.

Conditional Elements Introduction

Conditional Elements allows Administrators and Power Users to customize the Content Editing Experience for their users by conditionally displaying elements based on specific criteria. This feature helps simplify and streamline the content creation process for users by showing only relevant fields to Content Editors.

Conditional Statement Types

There are three types of conditional statements; 

Content Element-Based Conditions, User Group Conditions, and User Type Conditions.

1. Content Element-Based Conditions

• Allows element(s) to be shown based on the content of a different element.
• Useful for revealing additional elements based on specific input

Example 1: "If 'Research Type' is set to 'Grant-Funded', then show 'Funding Body Details' field"

Example 2: "If 'Course Level' dropdown is 'Postgraduate', then show 'Research Methodology' field"

Options depending on element type

Depending on the type of element you select, the options available for your conditional statements may be different.

The table below outlines all the different options depending on the element type selected.

2. User Group Conditions

Allows showing/hiding elements based on user group membership.

Example 1: "If User is in group 'International Admissions', then show 'Visa Requirements' elements"

Example 2: "If User is in group 'Research Grants Team', then show 'Indirect Cost Calculation' element"

3. User Type Conditions

• Controls element visibility based on the user's permission level
• Helps manage element access for different user types (Administrator, Power User, Moderator, Contributor)
• Simplifies content creation UI for user types that may not need to see all elements

Example 1: "If User is at least 'Administrator', then show 'Advanced Options' element"

Example 2: "If User is at least 'Moderator', then show 'Background Image' element"

Important Considerations

Logic Rules

• All conditional statements use OR logic
• If ANY conditional statement indicates an element should be displayed, it will be shown
• Note: Currently, AND logic is not supported
  • For example, it's not possible currently to create a rule like "If 'Element A' contains 'Test' AND 'Element B' contains 'Test' Then show 'Element C'.

Scope of Functionality

Editing Experience Only

• Conditional Elements ONLY affect how elements are displayed to Content Editors
• This feature does NOT impact how content is output on published pages

Not a Security Feature

• Conditional Elements is a quality of life improvement
• Hidden elements can still potentially be accessed or edited

Not Supported on System Content Types

• Conditional Elements are not designed to work with System Content Types such as:
  • Media
  • Section Metadata Content
  • Access Control
  • Extended User Details
• Attempting to add conditional rules to these content types will likely cause breaking behaviour.

Power User Permissions

Power Users do have the ability to manage Content types for any groups they are a member of.

This means that Power Users can create and edit existing Conditional Statements.

Important Note User Group-Based Conditions

• If an already existing Conditional Statement specifies an element should be shown only to users in a specific group
• AND the Power User is NOT a member of that group
• THEN the Power User will be prevented from:
  • Modifying that existing Conditional Statement
  • Removing that existing Conditional Statement
• Power Users can safely modify other conditional statements and add new ones

In the scenario that a Power User needs to remove or modify a Conditional Statement that they do not have access to, it is recommended that they

• Consult an Admin to make the change for them OR
• Request temporary access to the required group from an Admin

Required Fields

• If an element is marked as "required" but it is hidden by a conditional statement, it is NOT considered required
• "Required" now means "required if shown to content editors"

Saving Content with hidden fields

When saving content items, the data within hidden elements is NOT changed from how it was stored when the content is first loaded.

• If a user edits a content item and a field is hidden, the data in that field isn’t removed when saving
• If a user edits a content item and makes a change that results in a previously displayed element to become hidden, the value of the now hidden field remains unchanged when saving
• If a user edits a content item and changes a value in "Field A" and then that user subsequently makes a change that results in "Field A" being hidden, when the content item is saved, the changes in "Field A" will not be saved

If adding conditional statements to existing Content Types it is advised that you consider whether logic is also required in your Content Layouts to ensure the expected data is output.

Debugging Conditional Elements

Reveal Hidden Elements Option

When an Admin (or a Power User with the permissions to edit the Content Type) edits a content item with Conditional Elements:

• A new "Reveal hidden elements" checkbox is available
• When checked, ALL conditional logic is temporarily disabled
• All elements are displayed, regardless of existing conditions

This option is there to help administrators troubleshoot cases where elements are hidden and it's not clear why.

How to Configure Conditional Elements

There are three types of conditional statements that can be used:

Content Element-Based Conditions

• e.g. If an 'Image' is added to a news item, then show 'Image Caption' element
• e.g. If 'Research Type' is set to 'Grant-Funded', then show 'Funding Body Details' element
• e.g. If 'Course Level' dropdown is 'Postgraduate', then show 'Research Methodology' element.

User Group Conditions

• e.g. If User is in group 'Marketing & Communications', then show 'Feature News on Homepage' element
• e.g. If User is in group 'International Admissions', then show 'Visa Requirements' elements
• e.g. If User is in group 'Research Grants Team', then show 'Indirect Cost Calculation' element.

User Type Conditions

• e.g. If User is at least 'Administrator', then show 'Advanced Options' element
• e.g. If User is at least 'Moderator', then show 'Background Image' element

Accessing Conditional Logic

• Navigate to a Content Type (Assets » Content Types) and select a Content Type
• Select the "Elements" tab
• Click on the "Conditional logic" button

This opens a slide-out window where you can create conditional statements and view a real-time preview

Real-Time Preview

When configuring Conditional Elements, you'll notice:

• A live preview of the content item is automatically displayed.
• The preview updates in real time as you add or modify conditional statements.
• You can immediately see how your logic affects the editing interface.

Saving changes

Once you've created your conditional statements, ensure you save the Content Type before navigating away from the page.

Image with Caption Example

You may want to output an image only if it also contains a caption.

{{#and (ifSet element="Select Image") (ifSet element="Image Caption")}}
  <figure>
    {{publish element="Select Image"}}
    <figcaption>{{publish element="Image Caption"}}</figcaption>
  </figure>
{{/and}}

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 figure element and its corresponding figcaption

Conditional elements in News Content Type

In the News content type you created earlier, some elements are optional, allowing content editors to decide whether they should be populated.

One example is the Image Caption element. While it is optional, it should only be completed when an image has been added. Relying on editors to remember this can lead to inconsistent content and accessibility issues.

Another example is to use the Groups condition to only allow members of specific groups access to an element that will have the news item "feature" on your home page.

Conditional Elements allow you to control when elements are displayed and whether they are required, based on the values of other elements. This helps enforce editorial standards, improve content quality, and simplify the editing experience by showing only the fields that are relevant.

In the following exercise, you'll configure the Image Caption element so that it is displayed and becomes mandatory only when the preceding Image element has been populated.

How to configure your Image Caption using "Content Element" conditional logic

1. Go to Assets >> Content Types
2. Click into your News Content Type
3. Go to the Elements tab
4. Click Conditional logic, a conditional logic window will slide out.
5. Click Add conditional statement and build the following statement:
   1. If: Content Element
   2. Image (Media)
   3. Is not empty
   4. Then show: Image caption
      If wanted, you can make the Image Caption element a required/mandatory element
      
      
   5. Click Apply and close, you will be returned to the Elements tab
   6. Click Save changes to save your work.

How to configure a "Feature on Homepage" element using "User is in Group" conditional logic

1. Go to Assets >> Content Types
2. Click into your News Content Type
3. Go to the Elements tab
4. Click Conditional logic, a conditional logic window will slide out.
5. Click Add conditional statement and build the following statement:
   1. If: User is in group
   2. Select your group i.e., Marketing & Communications
   3. Then show: Feature on Homepage?
   4. Click Apply and close, you will be returned to the Elements tab
   5. Click Save changes to save your work.

Retrofitting repeaters into existing content types