Sitecore Experience Accelerator  (SXA) is a great productivity tool as it reduces your development time by giving you pre-built components. There were few new concepts and features that were also introduced with SXA like Page design and Partial design, pluggable themes, grid and column layout etc, but as the topic suggest, I will be focusing upon “Rendering Variant” concept and will try to explain how can this change the way you architect your website (assuming that is based on SXA).

Problem Statement

Let’s begin with a problem statement, the UX team have prepared a landing page and they have the various content components on the page displaying Image, Rich Text and Link all in a box but in various styles as below:

1. Half-width component with Image and Text
2. Half-width component with Image, Text and Link
3. Full-width component with Image on Left, Text and Link on Right
4. Full-width component with Image on Right, Text and Link on Left

They also want the content authors to have the ability to add them, remove them and order them in any way they like.

Sounds familiar ?

If I am not using SXA module, one of the approach would be to make these different components available via Experience Editor which content editor can add/remove/order from the content page. This means that there will be different “View Renderings” for each of the components types. Different view rendering mean different Data Source Templates and Data Folder Templates. So for the simple content based components above, we end up having 4 different view renderings, which more or less have same content but it is displayed differently.

SXA Approach

 

There is nothing wrong with the above approach, but if you website is based on SXA module you would have another tool to  meet your goal in a more effective manner.

The SXA provides a feature called Rendering Variant which optimizes the process of showing different variations of the same component. The variations can be setup via content editor and can also be supplemented with predefined styles and scripts.

The best way to explain Rendering Variants is by an example. I will be using the out of the box “Promo” component that comes with SXA. I am only interested in 3 data fields PromoText, PromoIcon and PromoLink (there are other properties too, but let’s keep it simple)

Rendering Variants are located under the /Site/Presentation/Rendering Variants node. In my case, the location was:

/sitecore/content/Tenant Folder/Tenant 1/Site 1/Presentation/Rendering Variants/Promo

Out of the box there was one rendering variant already present as ‘Default’.

I made a copy of that component and called it ‘Promo with Image and Text’

I then deleted last child item ‘Promo Link’ from the recently created rendering variant and clicked save. The ‘Default’ rendering variant was renamed to  ‘Promo with Image Text and Link’ for readability purposes. And just by doing these few content item operations, I was able to achieve my 2 component variations (under like 1 minute, thanks to SXA)

To verify my changes I tested them out in experience editor. First I added a column splitter component to divide the page into 2 equal halves, then I  uploaded some stock images, added the Promo component from the Toolbox in each of the half , added random text and selected my variants via the dropdown. They worked like a charm!

Similarly, I created a copy of the existing variants and called it “Promo with Image left” . I then added a ‘Section’ item for the variant definition and called it ‘Container’. I then moved “Promo Icon” under it. I also added the bootstrap class of ‘col-xs-6’ to ‘Container’ item and to the ‘Promo Text’ item.

As you can see in the screen shot above, there are other types of variant definition items as well, check them out from the official site and see how flexible they are to give you almost any kind of rendering variation that you like.

For “Promo with Image Right” I created a copy of the “Promo with Image Left” and just reversed the order ‘Promo Text’ and ‘Container’ sections:

To verify my changes, I navigated to the Experience Editor, dropped the ‘Promo’ component on the page and changed its rendering variant via the dropdown to get the results below:

And that’s it, without even writing a single line of code, I was able to get all 4 component variations. In theory the number of variations that could be achieved using rendering variants are unlimited and totally depend upon your UX and Design.

Conclusion

If you are starting a new website based upon SXA module, you must consider rendering variants for your components as it will change the way you architect the website. This was a simple post but it showed the true power of SXA and how Rendering Variants can reduce back-end development efforts and also improve the content authoring experience. Kudos to SXA development team for this awesome feature!

Have fun

Note: If you want to play around with the, here is the link to the rendering variant package. I have used Sitecore 8.2 update 5 and SXA 1.5.