Build a rendering that includes variants

Version:

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.

Controller

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();
        }
    }

Repository

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();
            FillBaseProperties(model);
            model.CustomProperty = "This is just an example rendering";
            return model;
        }
    }

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; }
    }

View

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">
        <h1>@Model.CustomProperty</h1>
        @foreach (BaseVariantField variantField in Model.VariantFields)
        {
            @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams)
        }
    </div>
</div>

If you have suggestions for improving this article, let us know!