Build a rendering that includes variants


Learn about the classes that are required for a new rendering that includes variants.

To create a new rendering that includes variants, you create a custom rendering, but use different base classes for controllers and repositories.

In the Presentation folder of your site, you can set which renderings are visible in the Toolbox in the Experience Editor. To be able to use the new custom rendering with its rendering variants, you must create the item using the exact same name under both the Available Renderings and the RenderingVariants folder.

This topic describes the changes needed in the code for renderings that include variants for the controller, repository, model, and view classes.

After you create a new rendering using SXA's basic structure, you must create a controller. For a rendering that includes variants, instead of inheriting from the StandardController class, the controller must inherit from the VariantsController.

For example, for a custom rendering called PageTitle the controller could look like this:

using PageTitle.Repositories;
using Sitecore.XA.Foundation.RenderingVariants.Controllers;
namespace PageTitle.Controllers
    public class PageTitleController : VariantsController
        protected readonly IPageTitleRepository PageTitleRepository;
        public PageTitleController(IPageTitleRepository pageTitleRepository)
            PageTitleRepository = pageTitleRepository;
        protected override object GetModel()
            return PageTitleRepository.GetModel();

The VariantsController provides the VariantsRepository:

using PageTitle.Models;
using Sitecore.XA.Foundation.Mvc.Repositories.Base;
using Sitecore.XA.Foundation.RenderingVariants.Repositories;
namespace PageTitle.Repositories
    public class PageTitleRepository: VariantsRepository, IPageTitleRepository
        public override IRenderingModelBase GetModel()
            PageTitleModel model = new PageTitleModel();
            model.CustomProperty = "This is just an example rendering";
            return model;

The model class of the new rendering must inherit from the VariantsRenderingModel:

using Sitecore.XA.Foundation.Variants.Abstractions.Models;
namespace PageTitle.Models
    public class PageTitleModel: VariantsRenderingModel
        public string CustomProperty { get; set; }

To generate the HTML markup in your view rendering cshtml file, iterate through the item properties of the model.

For example:

@using Sitecore.Extensions
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Fields
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields
@model PageTitle.Models.PageTitleModel
<div @Html.Sxa().Component("page-title", Model.Attributes)>
    <div class="component-content">
        @foreach (BaseVariantField variantField in Model.VariantFields)
            @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams)