Sitecore Foundation for SxA - Cshtml View Variants

One of SxA's most interesting features is its support for Variants: The ability to define alternate markup for components that can be selected by content author's via a drop down in experience editor. It's like compatible renderings on steroids. Where it doesn't live up to the hype is in the actual definition of the markup for each option. The idea of building each tag in nested Sitecore items to define markup seems tedious and brittle. That was the original reason I looked to introduce my own "Handlebar" Variant field type which still works well and is still improving (I've recently added a handlebar helper function to create Edit Frames. )

While some folks will gravitate toward the handlebar format, particularly if they've worked with JavaScript libraries that leverage it, I've noticed some resistance from others who prefer c# and Razor. To make everyone happy, I've implemented a new Razor Field type that will pass the Item as a Model to a Cshtml Razor View if given the View path. This will allow you to use C#, Razor and everything else you normally use to define views to create markup for a Variant.

Here's a video of it in action:

If you're interested in the implementation, my last article on the handlebar variant ttype detailed how to extend SxA variants pretty well, and the code for this implementation is located here.

List Component Strategies & Publishing Data Source Child Items as Related Items

Building a Custom Experience Button to Add Items to the SxA Data Folder