Handlebars Training Manual

Last Modified:

05 Feb 2026

User Level:

Administrator

Version 8.3.19 and up Toggle Dropdown

8.3.19 and up

Lists

• A List is a collection of items with a meaningful grouping or sequence. When used as part of a content type, a List allows a user to select one or more of the items within it as an option.
• When a List has been created and populated it is added to a Content Type. There are six Content Elements types that can be used with Lists:

How to create a list

1. Go to Assets > Lists > Add new list
2. Fill in the List information:
   1. Name: enter a name here. This should suggest what type of list it is used for.
   2. Description: describe in more detail when to use this list.
   3. Localization:  if the List is available in more than one language, you can use the localization options to:
      1. checkbox: Use current language version of this list (This prevents translations of the list).
      2. checkbox: Only use this list when localized versions are not available (when no translation of the List exists, this List is used).
   4. Primary group: select your group. This allows you to select the group which is permitted to use this list. Click Toggle shared groups to share the list with more than one group.
3. List items: enter the individual list items by clicking on the Add row button:
   1. Order: list items can be re-ordered using the move icon 
   2. Name: the name of the list item
   3. Value: the value of the list item
   4. Selected: when checked, this item will be the default selected item in the content type Element.
   5. Sublist: list items may have sub-categories that you want to link them to. Sublists are used with Cascading and Multi-select content type Elements.

4. Click the Save changes button to save your list.

Adding a list element to the "News" content type

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. Select the Elements tab.
4. Click the Add element button to add the new list select element as per the table below:
   1. Name: Give your List element a descriptive name. (e.g. "News categories")
   2. Description: Give your List element a description.
   3. Type: Choose "Multi-select List".
   4. List used for values: Select "[your_name] News Categories" from the available list options.

selectedNames and selectedValues Helpers

The selectedNames and selectedValues Helpers are used to give you some control over how List elements are output.

By default, if you output a List element with the publish Helper (in 8.4.0 and above), the selected List Item's Name will be output. If more than one item is selected, the names will be separated by a comma and a space , .

{{publish element="Checkbox"}}
<!-- output would be "Name1, Name2, Name3" etc. -->

The selectedNames Helper allows you to modify that separator value if required (it defaults to ,  if the argument isn't passed).

{{selectedNames element="Checkbox" separator="|"}}
<!-- output would be "Name1|Name2|Name3" etc. -->

If the selected list items contain sublists then you can choose to modify the level-separator between the parent and child items. It defaults to > if the argument isn't passed.

{{selectedNames element="Checkbox" separator="|" level-separator="~"}}
<!-- output would be "Name1|Name1~Child1|Name1~Child2|Name2|Name3" etc. -->

The selectedValues Helper works exactly the same way, except instead of outputting the selected list item's name, it output's the value.

How to use the selectedNames and selectedValues Helpers

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. Click into the Content layouts tab.
4. Choose to edit your "text/html" content layout.
5. Use the selectedNames and selectedValues Helpers to output the names and values of the items in the list. Use the separator option to separate the elements with a "|" symbol.
6. Click on the </> Generate Handlebars Expression button.
7. 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 "News categories" element from the content element drop-down.
   3. Handlebars helper: Choose Selected Names, used to output the selected item names from a list.
   4. Options:
      1.   Convert special characters to their HTML encoded values This is selected by default for List 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 inline-edit="true" to enable inline editing of this element in Direct Edit. This is disabled for list elements.
      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.
8. Click the Copy to clipboard button to copy the generated Handlebars expression. The expression should look like the code below:

{{selectedNames element="News categories" separator=", " level-separator=">"}}

9. Paste the Handlebars expression at the bottom of the news "text/html" content layout. Give it some context as per below:
   <p>Tags: {{selectedNames element="News categories" separator=", " level-separator=">"}}</p>

The list and selected Helpers

The list and selected Helpers are both used in order to give full control over the output of List elements.

List Helper

It allows you to loop over every item in a list. You have access to helpful variables that let you know whether the list item was selected by the user, whether there's a sublist, whether the list item is first or last, and many more. Check the docs for full information.

Selected Helper

The selected Helper works in a very similar way but instead of looping over the whole list, it just loops over the selected items in the list.

The list and selected Helpers are both used in order to help with the output of List elements:

• Select Box
• Check Box
• Radio Button
• Multi-select List
• Multiple Select
• Cascading List

Both the list and selected Helpers are designed to be used alongside the built-in each block expression with Handlebars.

Using the list Helper as an example:

{{#each (list element="List Content Element")}}
  <p>{{name}} - {{value}}</p>
{{/each}}

The above code is looping over every element in the list whether it is selected by the user or not and outputting the name and value in paragraphs.

However, there are a lot more variables available to use than just {{name}} and {{value}}. With both the list and selected Helpers we have the following variables available to us:

• listId - The Id of the list that this entry belongs to.
• listName - The Name of the list that this entry belongs to. (introduced in 8.4.0)
• entryId - The Id of this list entry.
• name - The name of this list entry.
• value - The value of this list entry.
• sequence - The sequence of this entry in the list.
• language - The language of the list entry.
• selected - true if the list entry is selected, false otherwise.
• hasSubList - true if the entry contains a sub-list.
• subList - A reference to the sub-list, if one is present.
• subListId - the Id of the sub-list, if present.
• subListName - the Name of the sub-list, if present. (introduced in 8.4.0)

In addition to the variables relating to each list entry returned, there are a number of variables made available to give the developer more information about the position of each entry in the list.

• @first - true if this is the first entry in the list/array.
• @last - true if this is the last entry in the list/array.
• @odd - true if this this entry has an odd index. Note that the array is zero-indexed.
• @even - true if this this entry has an even index. Note that the array is zero-indexed.
• @index - Returns the index of this entry within the list/array.

These allow us full control over how the lists should be output.

How to use the list and selected Helpers

• In this exercise, you will use the selected Helper and iterate not through the whole list but rather only through the selected items and display them.

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. Click into the Content layouts tab.
4. Choose to edit your "text/html" content layout.
5. Click on the </> Generate Handlebars Expression button.
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 "News categories" element from the content element drop-down.
   3. Handlebars helper: Choose Selected, used to output the selected items from a list.
   4. Options:
      1.   Convert special characters to their HTML encoded values This is disabled when using the list Helper.
      2. Allow this element to be edited inline in Direct Edit Adds inline-edit="true" to enable inline editing of this element in Direct Edit. This is disabled for list elements.
      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 the Copy to clipboard button to copy the generated Handlebars expression. The expression should look like the code below:

{{#each (selected element="News categories")}}
  <p>{{name}} - {{value}}</p>
{{/each}}This type of expression gives you full control over the output. Lets now update the code to output the selected names of the list in an unordered list format.

8. Click on the </> Generate Handlebars Expression button.
9. Open the </> Misc tab.
10. Select the "if" helper from the Helpers drop-down.
11. Click the Copy to clipboard button to copy the generated Handlebars expression.
12. Paste the Handlebars expression twice before and after the existing list output as below:

{{#each (selected element="News categories")}}
  {{#if condition}}
    condition is TRUE
  {{else}}
    condition is FALSE
  {{/if}}
  <p>{{name}} - {{value}}</p>
  {{#if condition}}
    condition is TRUE
  {{else}}
    condition is FALSE
  {{/if}}
{{/each}}

13. Update the code to output as as an unordered list, use the @first and @last variables to open and close the unordered list. The else clause previously generated by the expression builder is optional and not necessary in this exercise, make sure to delete it as per below:

<p>Tags:</p>
{{#each (selected element="News categories")}}
  {{#if @first}}
    <ul>
  {{/if}}
    <li>{{name}}</li>
  {{#if @last}}
    </ul>
  {{/if}}
{{/each}}

14. Click on the Save changes button to save your content layout.
15. Update your preview to check your result.

Using the list Helper

• In this exercise, let's use the list Helper to display the whole list and additionally display the items that have been selected in bold.

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. Click into the Content layouts tab.
4. Choose to edit your "text/html" content layout.
5. Use the each and list Helpers to iterate through all the items in the list.
6. Open an unordered list (<ul>) if in the first iteration of the loop. Use the if Helper and the @first variable.
7. Wrap the name of the list item with <li></li> tags.
8. Close the unordered list (</ul>) if in the last iteration of the loop. Use the if Helper and the @last variable.

[Iterate through all the items in the list]
  {{#if @first}}
    <ul>
  {{/if}}
  <li>{{name}}</li>
  {{#if @last}}
    </ul>
  {{/if}}
[Close the each Helper]

9. Click Save changes to save the changes to your content layout.
10. Update your preview to check the result.

Using the selected variable

1. Let's wrap each selected item in the list with a <strong> tag to display selected items in bold. Use the "selected" variable with an if Helper to achieve this.

[Iterate through all the items in the list]
  [Open the unordered list <ul>]
  [Output the name of the list item, if the item is selected display it in bold]
  [Close the unordered list </ul>]
[Close the each Helper]

2. Click Save changes to save the changes to your content layout.
3. Update your preview to check the result.

listById Helper

The listById Helper works exactly like the list and selected Helpers above, and includes all the same variables. The difference is this Helper outputs the list by referencing the list ID, rather than a list element.

This can be useful if you need to output a full list, but don't need it to be an item of content.

When using the listById Helper the selected variable will now return true or false depending on whether the list item is set to be selected by default in the List configuration page.

Related links content type

• Let's add a related links section to the sidebar content. To do this you will create a new content type called "Related links" which will be used as a repeater element that you will then add to the sidebar content type.
• One of the elements of the "Related links" content type is a list that will be used to select whether the link is internal, external or a pdf file. 
• Now that you've learned how to work with lists, let's start by creating a list that you will add as one of the elements in your "Related Links" content type. The "Link Type" list will be added as a select box and will be used to select which type of link (internal, external or pdf) is being created.

How to create a list

1. Go to Assets > Lists > Add new list
2. Fill in the List information:
   1. Name: enter a name here. This should suggest what type of list it is used for.
   2. Description: describe in more detail when to use this list.
   3. Localization:  if the List is available in more than one language, you can use the localization options to:
      1. checkbox: Use current language version of this list (This prevents translations of the list).
      2. checkbox: Only use this list when localized versions are not available (when no translation of the List exists, this List is used).
   4. Primary group: select your group. This allows you to select the group which is permitted to use this list. Click Toggle shared groups to share the list with more than one group.
3. List items: enter the individual list items by clicking on the Add row button:
   1. Order: list items can be re-ordered using the move icon 
   2. Name: the name of the list item
   3. Value: the value of the list item
   4. Selected: when checked, this item will be the default selected item in the content type Element.
   5. Sublist: list items may have sub-categories that you want to link them to. Sublists are used with Cascading and Multi-select content type Elements.

4. Click on the Save changes button to save your list.

How to create the "Related Links" content type

1. Go to Assets > Content Types > Create content type
2. Fill in the General content type information:
   1. Name: enter a name here. This should suggest what type of content it is used for.
   2. Description: describe in more detail when to use this content type.
   3. Minimum user level: if you wish to restrict who can use this content type, you can set a level here. If content types are created in groups, a user must be a member of the group as well as meet the minimum user level criteria to use the content type.
   4. Enable direct edit: decide if direct edit can be used for this content type.
   5. Mark as eForm: if checked, this allows your content type to collect eForm data.
   6. Workflow: if relevant, enable a workflow for content created using this content type.
   7. Primary group: select your group. This allows you to select the group which is permitted to use this content type. Click Toggle shared groups to share the content type with more than one group.
3. Select the Elements tab.
   1. Each content type has a Name element by default. This is used to name the content and is typically not displayed on the published site.
   2. Add the other elements you need by filling in the information as outlined in the table below. Click Add element to begin filling in the details for each element.
   3. Once you have added all your elements, click Save changes. The Content Layout tab opens.

4. The Content Layout tab is a new content layout for your content type. Click +Add content layout.
   1. Name: text/html - this is the default Type set in the Channel. This ensures the content can be displayed.
   2. File Extension: Default - unless this is used with a different File Extension. This requires other extensions being permitted in the Channel
   3. Syntax Type: HTML/XML – this determines which syntax is highlighted.
   4. Content layout processor: must be set to Handlebars Content.
   5. Content Layout code: this determines the output for your content. 

You will make use of the selectedValues Helper and the eq comparison Helper. In this particular example, you will use the eq comparison Helper to compare the value in the "Link Type" list which can be "internal", "external" or "pdf" and display the correct link based on what is selected in the content.

There are a number of Helpers to allow you to compare values:
eq - Tests if two values are equal
neq - Tests if two values are not equal
gt - Tests if one value is greater than another
gte - Tests if one value is greater than or equal to another
lt - Tests if one value is less than another
lte - Tests if one value is less than or equal to another
and - Tests if values are true (you can pass two or more arguments)
or - Tests if any values are true (you can pass two or more arguments)
not - If the provided input is false then the block will not be processed

Arguments are space separated when passed to Handlebars expressions (as opposed to comma separated).

{{#eq (publish element="Greeting") "Hello"}}
    <p>Hello to you too!</p>
{{else}}
    <p>You didn't say "Hello".</p>
{{/eq}}

{{#lt 5 8}}
    <p>5 is indeed less than 8.</p>
{{else}}
    <p>This will never be published because 5 is always less than 8.</p>
{{/lt}} 

5. Click into the Content layout code tab.
6. Click on the </> Generate Handlebars Expression button.
7. Open the </> Misc tab.
8. In the Helpers drop-down, select the eq Helper.
9. Click on Copy to clipboard to copy the generated Handlebars code. 
10. Paste the Handlebars code into your content layout.

The code generated by the Handlebars expression builder should look like the code below:

{{#eq value1 value2}}
  value1 and value2 are equal
{{else}}
  value1 and value2 are not equal
{{/eq}}

11. Let's update the code to suit our requirements (The updated code should look like the code below):
    1. Remove the else clause.
    2. Remove the placeholder output "value1 and value2 are equal" as you will be outputting links. 
    3. Repeat the code for the three different types of links.
    4. Replace "value2" with the three different values of links: ("internal", "external", "pdf").

{{#eq value1 "internal"}}
   
{{~/eq}}

{{#eq value1 "external"}}
   
{{~/eq}}

{{#eq value1 "pdf"}}
   
{{~/eq}}

12. Click on the </> Generate Handlebars Expression button.
13. 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 "Link Type" list element from the content element drop-down.
    3. Handlebars helper: Choose Selected Values from 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 This is disabled by default as list elements are not editable 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. It is the equivalent of selective output in t4 tags.
14. Click the Copy to clipboard button to copy the generated Handlebars expression and replace the "value1" with the Handlebars expression.

The handlebars expressions needed for the three different types of links are displayed below. Notice how the selected value of the "Link Type" list is compared to the three possible values in the list: "internal", "external" and "pdf". Copy the code into your layout.

You will need to remove the opening and closing curly braces "{{ }}" and use parentheses instead. This allows you to create a subexpression that can be inserted into your existing Handlebars expression. Additionally, there is no need to have the separator and level-separator parameters since you are not outputting values but just comparing them.

{{#eq (selectedValues element="Link Type") "internal"~}}
   
{{~/eq}}

{{#eq (selectedValues element="Link Type") "external"~}}
  
{{~/eq}}

{{#eq (selectedValues element="Link Type") "pdf"~}}
  
{{~/eq}}

15. Click on the </> Generate Handlebars Expression button.
16. 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 "Button Link (internal)" element from the content element drop-down.
    3. Handlebars helper: Choose Link from the drop-down.
    4. Options:
       1.   Convert special characters to their HTML encoded values This is disabled by default as links are not HTML encoded.
       2. Allow this element to be edited inline in Direct Edit This is disabled by default as list elements are not editable 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.
17. Click Copy to clipboard and paste in the Handlebars expression into the body of the Button Link (internal) eq block.
18. Repeat the steps above for the Button Link (external) and Button Link (media) elements.

Your content layout should now look like the code below:

{{#eq (selectedValues element="Link Type") "internal"~}}
  {{#link element="Button Text(internal)"}}
    <p>The link URL is: {{linkURL}}</p>
    <p>The link Text is: {{linkText}}</p>
  {{/link}}   
{{~/eq}}

{{#eq (selectedValues element="Link Type") "external"~}}
  {{publish element="Button Link (external)" inline-edit="true"}} 
{{~/eq}}

{{#eq (selectedValues element="Link Type") "pdf"~}}
  {{publish element="Button Link (media)" inline-edit="true"}} 
{{~/eq}}

19. Update the code as per below with the correct output for each type of link:

{{#eq (selectedValues element="Link Type") "internal"~}}
   {{#link element="Button Link (internal)"~}}
     <p><a href="{{linkUrl}}">{{publish element="Button Text"}}</a></p>
   {{~/link}}
{{~/eq}}

{{#eq (selectedValues element="Link Type") "external"~}}
  <p><a href="{{publish element="Button Link (external)"}}">{{publish element="Button Text"}}</a></p>
{{~/eq}}

{{#eq (selectedValues element="Link Type") "pdf"~}}
  {{{media id=(mediaId element="Button Link (media)") layout="application/*"}}}
{{~/eq}}

20. Click Save changes to save the changes to your content layout.

Conditional elements

• In order to make the "Related Links" content type work correctly, you will add conditional elements to show/hide the different types of links based on the selection made in the "Link Type" list. Let's learn how this can be achieved.
• Conditional Elements allows Administrators and Power Users to customize the Content Editing Experience for their users by conditionally displaying elements based on specific criteria. 

How to add conditional elements to a content type

• There are three types of conditional statements that can be added:

1. Content Element-Based Conditions
   1. e.g. If 'Research Type' is set to 'Grant-Funded', then show 'Funding Body Details' field
   2. e.g. If 'Course Level' dropdown is 'Postgraduate', then show 'Research Methodology' field
2. User Group Conditions
   1. e.g. If User is in group 'International Admissions', then show 'Visa Requirements' elements
   2. e.g. If User is in group 'Research Grants Team', then show 'Indirect Cost Calculation' element
3. User Type Conditions
   1. e.g. If User is at least 'Administrator', then show 'Advanced Options' element
   2. e.g. If User is at least 'Moderator', then show 'Background Image' element

• Let's add the following Content Element-Based Conditions to the sidebar content type:

1. If 'Link Type' is set to 'Internal Link' then show 'Button Link (internal)' field
2. If 'Link Type' is set to 'External Link' then show 'Button Link (external)' field
3. If 'Link Type' is set to 'Media/PDF Link' then show 'Button Link (media)' field

1. Go to Assets > Content Types
2. Click your content type name to edit it. (Use the Filter tool to search). 
3. Open the Elements tab.
4. Click on the Conditional logic button to bring up the Conditional logic & Live Preview screen.
5. Click on the +Add conditional statement button. Build a conditional statement for the "Internal Link" as per the table below:

6. Click on the +Add conditional statement button. Build a conditional statement for the "External Link" as per the table below:

7. Click on +Add conditional statement button. Build a conditional statement for the "Media Link" as per the table below:

8. Click on the Apply and close button to apply your conditional elements to the content type.
9. Click Save changes to save your content type.

Repeaters

• Repeaters allow you to configure a content type so that it can include another content type inside it.

How to add a repeater element

Let's now add the "Related Links" content type as a repeater element to the Sidebar content type.

1. Go to Assets > Content Types.
2. Click your content type name to edit it. (Use the Filter tool to search). 
3. Select the Elements Tab.
4. Add a repeater element by filling in the information as outlined in the table below. Click Add element to begin filling in the details.

When selecting "Repeater" as the type, a new "Flyout screen" will be displayed automatically that allows you to choose which content type should be repeated.

5. Configure the repeater element:
   1. Content type: select the content type to be repeated, this should be the name of your "Related Links" content type.
   2. Content layout: the default layout that will be output for this repeater element, e.g. text/html.
   3. Repeater settings:
      1. Minimum repeats: the minimum amount of repeats allowed, e.g. 1.
      2. Maximum repeats: the maximum amount of repeats allowed, e.g. 5.
6. Once you have finished configuring your repeater element, click Save changes. 

How to output the repeater

1. Click into the Content layouts tab.
2. Select the "text/html" content layout and open the </> Content layout code tab.
3. Add the output of the repeater element by generating the correct Handlebars code.
4. Click the </> Generate Handlebars Expression button again.
5. You are now going to build an expression to output the "Related Links" repeater element.
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 "Related Links" repeater element from the content element drop-down.
   3. Handlebars helper: select Publish from the drop-down.
   4. Content Layout: choose the content layout to apply to the display of the repeater element. This appears if you select Repeater as the Handlebars helper.
   5. Options:
      1.   Convert special characters to their HTML encoded values This is disabled for repeater elements.
      2. Allow this element to be edited inline in Direct Edit This is disabled by default as list elements are not editable 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.
7. Click Copy to clipboard to copy the Handlebars expression.
8. Add the Handlebars expression and a heading as per below to your content layout:

<h4>Related Links:</h4>
{{{publish element="Related Links"}}}

9. Click Save changes to save the changes to your content layout.
10. Update your preview to check the result.

Updating the content layout with the repeater Helper

The repeater Helper is used to output a Repeater element (introduced in 8.4.1).

By default, if you output a repeater element with the publish Helper, then the repeater will be output using the default Content Layout associated with the repeater configuration.

If you need more control over which layout should be output you can use the repeater Helper to explicitly select a layout like so:

{{repeater element="Repeater Element" layout="text/example"}}

How to use the Repeater Helper

1. Go to Assets > Content Types.
2. Click your content type name to edit it. (Use the Filter tool to search). 
3. Click into the Content layouts tab.
4. Click on the +Add content layout button to add an alternative content layout.
   
   1. Name: text/alternative
   2. File Extension: Default - unless this is used with a different File Extension. This requires other extensions being permitted in the Channel
   3. Syntax Type: HTML/XML – this determines which syntax is highlighted.
   4. Content layout processor: must be set to Handlebars Content.
   5. Content layout code: this determines the output for your content. If you have created the HTML already, you can start by pasting that into the code field as displayed below.

{{#eq (selectedValues element="Link Type") "internal"}}
   {{#link element="Button Link (internal)"~}}
     <p><a class="button small radius" href="{{linkUrl}}">{{publish element="Button Text"}}</a></p>
   {{~/link}}
{{~/eq}}
{{#eq (selectedValues element="Link Type") "external"}}
  <p><a class="button small radius" href="{{publish element="Button Link (external)"}}">{{publish element="Button Text"}}</a></p>
{{~/eq}}
{{#eq (selectedValues element="Link Type") "pdf"}}
  {{{media id=(mediaId element="Button Link (media)") layout="PDF link with filesize"}}}
{{~/eq}}

5. Click Save changes to save the changes to your content layout.
6. Go to your Sidebar content type.
7. Click into the Content layouts tab.
8. Select the "text/html" content layout and open the </> Content layout code tab.
9. Add the output of the repeater element by generating the correct Handlebars code.
10. Click the </> Generate Handlebars Expression button again.
11. You are now going to build an expression to output the "Related Links" repeater element.
12. 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 "Related Links" repeater element from the content element drop-down.
    3. Handlebars helper: select Repeater from the drop-down.
    4. Content Layout: choose text/alternative.
    5. Options:
       1.   Convert special characters to their HTML encoded values This is disabled for repeater elements.
       2. Allow this element to be edited inline in Direct Edit This is disabled by default as list elements are not editable 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. It is the equivalent of selective output in t4 tags.

13. Click Copy to clipboard to copy the Handlebars expression.
14. Add the handlebars expression to your content layout. The expression should look like the code below: 

{{{repeater element="Related Links" layout="text/alternative"}}}

15. Click Save changes to save the changes to your content layout.
16. Update your preview to check the result.

If you need even more control over how the repeated items should be output the repeater Helper can be used in an each expression to give you full control. For example:

{{#each (repeater element="Repeater Content Element")}}
    <p>Output</p>
{{/each}}

In the above example above, the word "Output" will be output once for every repeater instance that exists in the content. So if the content contains five slides, then "Output" will be output 5 times.

Because we're inside an each block, we have several variables available to us:

• @length - this will return a number corresponding to how many repeated items there are in this element.
• @first - true if this is the first repeater instance being output
• @last - true if this is the last repeater instance being output
• @odd - true if this this repeater instance has an odd index. Note that the array is zero-indexed.
• @even - true if this this repeater instance has an even index. Note that the array is zero-indexed.
• @index - Returns the index of this entry within the repeater instance. (Starting from "zero" for the first item)
• @index_1 - Returns the index of this entry within the repeater instance. (Starting from "one" for the first item)

While inside this each loop the context or scope has shifted to the "Repeated" content type. This means that you can output the elements and content metadata from the repeated child items.

For example:

{{#each (repeater element="Repeater Content Element")}}
  {{publish element="Name"}}
{{/each}}

The above code will output the Name element of each Repeated content item, not the Name element of the "parent" content item.

If you need Helpers to be evaluated from the parent content item's scope, you can pass a scope="parent" flag into your helpers.

For example:

{{!-- Outside of the each loop, so will output the Name element from the parent content item --}}
{{publish element="Name"}}
{{#each (repeater element="Repeater Content Element")}}
  {{!-- Inside of the each loop, so will output the Name element from the repeated/child content item --}}
  {{publish element="Name"}}

  {{!-- Inside of the each loop, but contains a scope="parent"
        So will output the Name element from the parent content item. --}}
  {{publish element="Name" scope="parent"}}
  
  {{!-- Inside of the each loop, so will output the Content ID of the repeated/child content item --}}
  {{contentId}}

  {{!-- Inside of the each loop, but contains a scope="parent"
        So will output the Content Id of the parent content item. --}}
  {{contentId scope="parent"}}
{{/each}}

The scope="parent" is ignored if it's not used within an each Helper looping over repeated content items.

Feedback survey

Congratulations on completing the Advanced Web Developer Training module.

Please provide feedback in our on-line survey.