Item and field extensions

This topic describes the SXA item extensions that make it easier to access fields, item properties, and field properties.

i_item.children

Returns the children of the item as an Item list.

Example

Render the children of an item as a list of links:

{{ for i_child in i_datasource.children }}
<a href="{{ i_child.url }}">{{ i_child.Title }}</a><br/>
{{ end }}

i_item.display_name

Returns the Display Name of the item.

Example

Render a link to the component Data Source using the Display name of the data source item as the text of the link:

<a href="{{ i_datasource.url }}">{{ i_datasource.display_name }}</a>

i_item.id

Returns the ID of the item.

Example

Output the ID of the item:

{{ i_item.id }}

i_item.has_children

Returns true if the item has children.

Example

If the current page has children, render links to these children:

{{
    if i_page.has_children
        for i_child in i_page.children
            }}<a href="{{ i_child.url }}">{{ i_child.display_name }}</a><br/>{{
        end
    end  }}

i_item.has_layout

Returns true if the item has layout information.

Example

Render the children of a page that has children:

{{
    for i_child in i_page.children
        if i_child.has_layout
            }}<a href="{{ i_child.url }}">{{ i_child.display_name }}</a><br/>{{
        end
    end  }}

i_item.language

Returns the language code of the item.

Example

If the item is rendered in English, output text stating the fact:

{{ if i_page.language == 'en' }}
This page is rendered in English<br/>
{{ end }}

i_item.media_url

Returns the media URL to the item.

Example

Render a download link to the Promo component image:

<a download href="{{ i_datasource.PromoIcon.media_url }}">{{ i_datasource.PromoIcon.name }}</a>

i_item.name

Returns the Name of the item.

Example

Render a link to the component Data Source using the Name of the data source item as the text of the link:

<a href="{{ i_datasource.url }}">{{ i_datasource.name }}</a>

i_item.path

Returns the path of the item.

Example

Render link to an item only if it is located under /sitecore/content:

{{ if string.starts_with i_item.path "/sitecore/content" }}
<a href="{{ i_item.url }}">{{ i_item.Title }}</a><br/>
{{ end }}

i_item.parent

Returns parent of the item.

Example

Render a link to the parent of the data source item:

<a href="{{ i_item.parent.url }}">{{ i_item.parent.Title }}</a><br/>
{{ end }}

i_item.template_id

Returns the ID of the item template as a string.

Example

Output the ID of the item:

{{ i_item.template_id }}

i_item.template_name

Returns the name of the item template as a string.

Example

Return the item template name:

{{ if i_item.template_name == "Gallery Image" }}
 ... render HTML for Gallery image
{{end}}

i_item.url

Returns the URL to the item using the site LinkProvider.

Example

Render a link to the component Data Source using the Display name of the data source item as the text of the link:

<a href="{{ i_datasource.url }}">{{ i_datasource.display_name }}</a>

i_item.version

Returns the version number of the item.

Example

Output the version number of the item:

{{ i_item.version }}

i_item.FieldName

Renders the field within your template.

Example

Render the field within your template by appending the FieldName to the item object:

  {{ i_item.Title }}

Note

i_item.FieldName does not allow following links for fields that contain special characters, such as ‘.’, ‘,’, white spaces, and so on. It does not support data attributes or field fallback either. In these cases, use the sc_field function.

i_item.Field.raw

Returns the raw value of a field. For example, to render an ID to an item that you use in your JavaScript or for buttons that should not be editable.

Example

Render the text on a button:

<button type="button" class="btn btn-primary">{{ i_item.ButtonText.raw }}</button>

i_item.Field.target

Returns an item selected in a field that can store links to items. If the field can contain links to multiple items, the first item in the list is returned. If the field is empty, the function returns a null value.

Note

i_item.Field.target does not allow following links for fields that contain special characters, such as ‘.’, ‘,’, white spaces, and so on. In these cases, use the sc_follow function.

Example

Render more information about a product linked from a Promo component:

{{ i_linkedpage = i_item.PromoLink.target }}
<h2>{{ i_linkedpage.Title }}</h2>
<b>Content</b>:{{ i_linkedpage.Content }}

i_page.Field.targets

Returns an array of items selected in a field that can store links to items. If the field is empty, the function returns an empty list.

Note

i_page.Field.target does not allow following links for fields that contain special characters, such as ‘.’, ‘,’, white spaces, and so on. In these cases, use the sc_followmany function.

Example

Render the products related to the current product:

{{ for i_product in i_page.RelatedProducts.targets }}
  <h2>{{ i_product.Title }}</h2>
  <b>Content</b>:{{ i_product.Content }}
{{ end }}

When you use a field in a fluent notation, you can use field cascading and fallback to simplify more complex scenarios. You can cascade link fields in a fluent notation to reach out to items without having to call the .target helper. For example: i_item.FieldLinkingToItem.HelperOrFieldToRender.

For example, to render a field on an article page named FirstName that is part of a field named Author Info that is part of a field named Author:

Article by: {{ i_page.Author.FirstName }}

You can create templates that support multiple data templates by cascading the field names in a fluent notation. The templating engine attempts to resolve and render fields left-to-right and renders the first field that it finds on an item.

For example, if the page does not have an Author field, the templating engine attempts to render the FirstName field directly from the i_page.