Create a rendering variant

Last updated Tuesday, August 30, 2016 in Sitecore Experience Accelerator for Designer, Developer
Keywords: Configuration, Layouts

SXA comes with a set of default renderings and rendering variants. Rendering variants are configurable adaptations of the default renderings. To further encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.

You can create your own variation of a rendering by adding a variant in the Content Editor.

To create a rendering variant:

  1. In the Content Editor, click the site and open the Presentation/Rendering Variants folder. This folder lists all the renderings that allow variants.

    Note

    To add a rendering to the folder, contact your Administrator.

  2. Right-click the rendering that you want to add the variant to, and then click Insert, Variant Definition.

    Go to Presentation, Rendering Variant, right-click the rendering.

  3. Enter a name and click OK.
  4. In the Variant Details section, specify information in the following fields:
    • Css Class: specify the class name for the variant in the HTML.
    • Item CSS class: specify the CSS class for list items. For example, for variants of PageList, LinkList, FileList, and Navigation renderings.
    • Field used as link target: provide the field name of the target item. This class is added to the list and navigation items markup (li HTML element). This link is used to override all links when the Is link, Is prefix link, or Is suffix link check boxes are selected.
    • Allowed in templates: specify the pages that the variant is available for. Click the relevant page template, click the right arrow to move it to the list of selected items, and then click Save. If there are no templates selected, the variant is available for all pages.
  5. To add child items to the rendering variant, right-click the variant, click Insert, and then click the relevant item.
    • Date: displays data and time in custom format.
    • Field: displays field name and other field values.
    • Placeholder: allows to render an empty placeholder.
    • Reference: displays field from referenced item.
    • Section: used to create groups. For example, if you want to render two div elements, you can create two section items that each contain one of the two div elements.
    • Template: allows user to define NVelocity template which will be used to render part of the HTML.

      Note

      NVelocity is a .Net-based template engine. It permits developers to use the simple yet powerful template language to reference objects defined in .Net code.

    • Text: displays text.
    • Token: supports tokens $Size and $FileTypeIcon.

    Right-click the variant and click the field.

    Depending on the item you add, you can set the following fields:

    Field

    Variant details

    Tag

    HTML tag in which the field content will be rendered. For example: div

    If left empty field content will remain unwrapped.

    Field name

    Name of the field current item.

    Prefix

    Adds string value as a prefix.

    Suffix

    Adds string value as a suffix.

    Is link

    Select to have hyperlinks that wrap the field content.

    Is prefix link

    Select to wrap prefix in the same link which you use for the field content.

    Is suffix link

    Select to wrap the suffix with a hyperlink.

    Is download link

    Select to have a hyperlink with a download attribute.

    Css Class

    Adds Css class to the tag.

    Is editable

    Select to edit rendered field.

    Date format

    Determines the date format.

    Render if empty

    Select to render empty element when the field is empty.

    Pass through field

    Defines the name of the field from the nested item.

    Text

    The text to render.

    Template

    Define the NVelocity template that renders part of the component variant HTML. You can use the following objects:

    $item: access to the current item ($item.Name displays current item name).

    $dateTool.Format(date, format): formats date and time values.

    $numberTool.Format(number, format): formats numbers.

    $geospatial: in case of geospatial search ($geospatial.Distance) will show distance to certain point of interest).

    Token

    Use special tokens to format certain field values. Supported tokens are:

    $Size: displays size of a file depending on size unit.

    $FileTypeIcon: displays icon depending on file extension.