Item and field extensions

Version: 10.4

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:

RequestResponse
{{ 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:

RequestResponse
<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:

RequestResponse
{{ 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:

RequestResponse
{{
    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:

RequestResponse
{{
    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:

RequestResponse
{{ 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:

RequestResponse
<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:

RequestResponse
<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:

RequestResponse
{{ 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:

RequestResponse
<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:

RequestResponse
{{ i_item.template_id }}

i_item.template_name

Returns the name of the item template as a string.

Example

Return the item template name:

RequestResponse
{{ 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:

RequestResponse
<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:

RequestResponse
{{ 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:

RequestResponse
  {{ i_item.Title }}
Note

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.

RequestResponse
{{ 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:

RequestResponse
<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 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:

RequestResponse
{{ 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 periods ("."), commas (","), white spaces, and so on. In these cases, use the sc_followmany function.

Example

Render the products related to the current product:

RequestResponse
{{ 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:

RequestResponse
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

Note

If the rendering variat returns an empty string, you might have used an incorrect field type or a property that does not exist.

Do you have some feedback for us?

If you have suggestions for improving this article,