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 periods ("."), commas (","), white spaces, and so on. It does not support data attributes or field fallback either. In these cases, use the sc_field
function.
sc_responsive
Pulls media from the Media Library or Content Hub and makes its size scale according to the selected screen size.
Example
Retrieve media from Content Hub and render it according to screen size, depending on the provided values.
{{ sc_responsive i_item"image" "(min-width: 40em) 80vw, 100vw" "800, 1000, 1500" "1000" }}{{ sc_responsive i_item"image""(min-width: 40em) 80vw, 100vw" "800, 1000, 1500" "1000"}}
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 are not 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 periods ("."), commas (","), 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 periods ("."), commas (","), 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
.
Using field metadata in Scriban templates
You can access and re-use the values from field metadata for existing images and links directly via your Scriban template. Use this to build templates with pre-existing content, without having or use pre-defined rendering variants. This works for both files hosted in the Media Library and in Content Hub. To access and use the field metadata, type one of the following metadata properties for your context item, for example an i_item
, into your Scriban template in the Content Editor.
Metadata for links:
-
_alt
-
_anchor
-
_description
-
_query
-
_class
-
_target
-
_isinternal
-
_ismedialink
-
_targetid
-
_text
-
_title
-
_linktype
-
_url
Metadata for images:
-
_alt
-
_class
-
_height
-
_hspace
-
_vspace
-
_width
If the rendering variat returns an empty string, you might have used an incorrect field type or a property that does not exist.