Scriban templates

Current version: 10.1

Scriban templates are stored in your SXA rendering variants and are available as additional renderers. For example, as field renderers, sections, or tags. Scriban templates can coexist with the other renderers but you can also use them to replace the existing rendering variants.

How to access the Scriban command from the content tree.
Important

If you want to use a Scriban template as a rendering variant for an SXA component, to avoid broken styles, you must manually style the Scriban template and all HTML child elements within the applied theme.

You can export and import Scriban templates using Creative Exchange. This gives front-end developers much more flexibility over the component markup and functionality. Scriban templates can vary from rendering simple tokens to offering full replacement for components. For example, the following rendering variant renders the content of the Gallery component:

RequestResponse
{{-
  if i_item.template_name == "Gallery Image"
    sc_editframe i_item 'Gallery Image' -}}
    <a class="field-image">
      <a title="{{ i_item.ImageTitle.raw }}" href="{{ i_item.Image.media_url }}">
      {{ i_item.Image }}
      </a>
    </a>{{
    sc_endeditframe
  end -}}

{{-
  if i_item.template_name == "Gallery Video"
    sc_editframe i_item 'Gallery Video'
    if (i_item.VideoID.raw ) == "" &&(i_item.VideoThumbnail.raw) == "" -}}
      <span>[Edit Gallery Video here]</span>{{
    else -}}
      <a title="{{i_item.VideoTitle.raw }}" href="http://www.youtube.com/watch?v={{ i_item.VideoID.raw }}">
      <img src="{{ o_model.thumbnail_url }}" alt="{{ i_item.VideoDescription.raw }}"
             data-title="{{ i_item.VideoTitle.raw }}" data-description="{{ i_item.VideoDescription.raw }}" ></img>
      </a>{{
    end
    sc_endeditframe
  end }}

This example shows how you can conditionally render parts of the HTML code based on the item template, how to access your rendering C# model, and how to call its properties as well as its item properties. It also wraps areas of the component with Edit frames to improve the editing experience.

The topics in this section describe the Sitecore extensions for the Scriban templates:

Note

There is general documentation available about the underlying templating language and the built-in functions on the Scriban GitHub repository.

You can watch this video from the Discover Sitecore channel for a demonstration of how you can use Scriban.

Do you have some feedback for us?

If you have suggestions for improving this article,