5 min to read

Turbo boosting Sitecore SXA Rendering Variants

Featured image

In my post Tuning Sitecore Experience Accelerator (SXA) with React.Net and Supercharging Sitecore with SXA I have proven that you can do just do about anything in SXA like the greatness of having the ability to use your own design (markup/html) whenever you like withing Sitecore SXA and use them in the Experience Editor Toolbox and drag and drop your components.

Of course some of you might think that there's more to SXA than just components and the toolbox and that's true. But it would be unfair to SXA to just cover all of the functionality in one post. So keep coming back and read about my SXA journey because I believe that it is here to stay and Sitecore is going to intensify their work on SXA.

One of the main purposes of SXA is a faster time to market and this is mainly done by skipping code. How? all configuration is done in the content section and therefore is treated like content. And because it is content we only need to publish it.

Some other companies may choose to have a team of front-end developer who do not know much about Sitecore and even are added to the team of developers.

Want to skip to the conclusion?

Turbo boosting Rendering Variants

Back to turbo boosting rendering variants. But what are rendering variants? Actually it's pretty simple. Imagine a news website. A news item may be shown with a title, an image on the left and a small intro on the right. A rendering variant is just the same data with a different presentation, let's say we want the image on the right and the intro on the left.
This can be done with the Rendering Variants in SXA. Even way cooler... from the control box in the Experience Editor we can choose from a drop-down which variant we want to use!!

In my previous post on Tuning Sitecore SXA I used server side rendering with ReactJS to allow fast development of your own components and scaffolding controls. Issue here is that you only have one visual aspect of the component. Often you need to have multiple presentations of a component, image left, right, above or below, with a teaser text or not. This will soon lead to a lot of components in your toolbox. You can sort them by area but this is not a nice way to manage it.

Adding an SXA rendering variant

First we need to add only the main component to the toolbox which means we are adding it to the available renderings:

Then we need to add the Rendering variants to this rendering. This is done by adding a Rendering Variant. Because I want to be able to switch back to the original rendering I also add this one as the default:

Which controller to use when using SXA

As seen below I added the rendering of the variant:

After this I went back to the Experience Editor to see if it works.
It didn't. Why? I use a StandardController and should have used the VariantsController. So I felt a little like this...(for one week)

Use of the VariantsController is a necessity and allows you to get extra information from the variant itself. When working with POCO's you alternatively use an extra repository and inject it into your controller. For non-technical readers: this will be done for you by a developer :-)

Adding variables to Sitecore SXA rendering variants

After fiddling around in the Quickwatch of Visual Studio I came up with the idea of adding a data attribute to the variant and pass it into my controller. This means that I get the Variant Field named Controller and from there I ask for the ModuleName Data Attribute which holds the module name of my React Control.

For this to work we must have some references:

and eventually some code to pass the variables to the actual property to render the right variant:


using Macaw.XA.Feature.Media.Models;
using Sitecore.Mvc.Presentation;
using Sitecore.Web.UI.WebControls;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Linq;
using Sitecore.XA.Foundation.RenderingVariants.Controllers;
using Sitecore.XA.Foundation.RenderingVariants.Fields;

namespace Macaw.XA.Feature.Media.Controllers
{
    public class HeroController : VariantsController
    {
        public ActionResult React()
        {
            
            var item = RenderingContext.Current.Rendering.Item;
            var helper = RenderingContext.Current.PageContext.HtmlHelper;

            // get variant data from SXA
            var repos = this.VariantsRepository;
            var field = repos.VariantFields.Where(x => x.ItemName.Equals("Controller", System.StringComparison.OrdinalIgnoreCase)).FirstOrDefault();
            var controllerField = field as VariantField;
            string moduleName = controllerField?.DataAttributes["ModuleName"];

            ViewBag.Module = moduleName; 


            var placeholders = new List() { };


            return PartialView(new DummyViewModel { Title = FieldRenderer.Render(item, "Title"), Text = FieldRenderer.Render(item, "Body"), Placeholders = placeholders });
        }
    }
}

</code></pre>
Get the full source here. Make sure to add your own React server bundle in the scripts directory.
After publishing all of my configuration (my SXA settings is content so publish it or it doesn't work!) I can choose my component and switch the variant:
Takeaways
As said before Sitecore SXA is a development framework. All roads lead to Rome when it comes to finding the right solution to implement what's the right way for your implementation. Adding the VariantsController adds even more functionality to your experience and will help the content editor to keep overview and ease of using all the greatness in Sitecore. Now we can easily choose a React variant from a drop-down box instead of choosing one from the control box and selecting a compatible rendering.