Links content type

• Let's now create a "Links" content type. One of the elements of the "Links" content type is a list that will be used to select whether the link is internal, external or a pdf file. 
• Let's start by creating a list that you will add as one of the elements in your "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.

Before you start

Be sure you have the following added to your training site:

- Duplicate the "T201H Training Site Example" page layout.
- Create a channel for your training website.
- Duplicate the "T201H Training Site Example: Sidebar Box" content type.
- Enable the content type to your "Home" branch and add some sidebar content.

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 "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}}">{{linkText}}</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 "Links" content type work correctly, you will add conditional statements 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 allow Administrators and Power Users to customize the Content Editing Experience for their users by conditionally displaying elements based on specific criteria. 

Below you can see a "Links" content type without conditional elements. Multiple groupings of elements for each type of link would be created as part of the content type, i.e. Link 1 Text, Link 1 Internal, Link 1 External, Link 1 Media, Link 2 Text, Link 2 Internal, Link 2 External, Link 2 Media...etc.

Without conditional elements, content types would become difficult to use and error prone to most content editors.

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.

Enable a content type

• Now that you’ve built your content type, you need to decide where it can be used and by whom.
• You need to enable your new content type to your Site structure to test it.
• Content types can only be used in Sections where they are enabled.
• If a content type is created in a Group, only users who are members of that Group can use the content type.
• Only users who meet the Minimum User Level criteria can use the content type.

How to enable a content type

1. On the Site Structure screen, click on the name of your main section.
2. The General information about this section screen appears, select the Content types tab.
3. Using the Filter feature, locate your content type.
4. Select the radio button to enable your content type for either the branch or section:
   1. Enabled (branch): the content type can be used in this section as well as all its sub-sections.
   2. Enabled (section): the content type can be used in this section only.
5. Click Save changes to confirm your selection. You can now use the new content type to add content to your section. 

Repeaters

• Repeaters allow you to configure a content type so that it can include another content type inside it.
• You will use a "Sidebar" content type that will output to the left side of the page and then add your "Links" content type as a repeater element to the "Sidebar" content type.

Before You Start

Make sure you have a "Sidebar" content type that outputs content to the left side of the page.
You can use a Related Content Navigation in your page layout to do this.

How to add a repeater element

Let's now add the "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 "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:

<h5>Related Links:</h5>
{{{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 style="display: block" class="button small radius" href="{{linkUrl}}">{{publish element="Button Text"}}</a></p>
   {{~/link~}}
{{~/eq~}}
{{~#eq (selectedValues element="Link Type") "external"~}}
  <p><a style="display: block" class="button small radius" href="{{publish element="Button Link (external)"}}">{{publish element="Button Text"}}</a></p>
{{~/eq~}}
{{~#eq (selectedValues element="Link Type") "pdf"~}}
  <a href="{{{media id=(mediaId element="Button Link (media)") layout="path/*"}}}">{{publish element="Button Text"}}</a>
{{~/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.