Item and field extensions
This topic describes the SXA item extensions that make it easier to access fields, item properties, and field properties.
Item 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 }}Retrieve and render item fields
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 }}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.
Field extension properties
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.
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.
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 }}Working with field cascading and fallback
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.