Using Glass Mapper with SXA

If you have built custom components for SXA, you know that it is quite the chore. Even building simple renderings require a controller, a model, a repository (split into both interface and concrete class) and dependency injection code to wire everything up. While I appreciate the separation, it does feel like overkill to create a repository simply to get the context item. Unfortunately, because of the way SXA is setup, you need to go through all of this, in order to get the RenderingModel's Attribute property which ensures you're component works with the OOB rendering parameters and plays nicely with the grid.

If you want to use Glass Mapper in your components, you cannot just inherit from "GlassController", as all SXA components must inherit from StandardController or VariantsController, neither of which makes it easy to introduce glass unless you are manually wiring things up in your custom model and repository. To get around this, I have added two new base classes to the SXA branch of Sitecore Foundation: GlassStandardController and GlassVariantController Both are generic types that allow you quickly create Controllers that leverage Glass Models without needing to build custom models or repositories, while still fully supporting the SXA component model.

To use it, simply extend the appropriate base controller (use the variant one to support Variants) while specifying the type of the glass class that maps to the template you want to expose. Here is a simple example:

public class MyGlassComponentController: GlassStandardController<GlassTemplateType>
{
        public MyGlassComponentController() : base()
        {
        }
        public override ActionResult Index()
        {  
            return View(this.Model);
        }
}

The Model is an extension of the SXA BaseRenderingModel. It is returned from a generic repository that is instantiated by the base class. This model has an additional property called "GlassModel" which has the strongly typed mapped instance of the components data source item.

This allows you to inherit your View from Glass View and use Glass Helpers like Editable to define your view.

@inherits GlassView<RenderingGlassModel<GlassTemplateType>>
<div @Html.Sxa().Component("my-glass-component", Model.Attributes)>
    <div class="component-content">
        @Editable(Model.GlassModel, x => x.Title)
    </div>
</div>

Note that you need to pass your actual glass model type passed to the generic type RenderingGlassModel when inheriting from GlassView as shown in the example above.

The code for all this can be found in the SXA branch of Sitecore Foundation. More specifically it is located in the Components Project located in the Foundation layer of the framework per Helix guidelines. Feel free to clone to get this and more, or just steal the base classes and incorporate into your project.

Beyond Creative Exchange: Front End Code and SxA

Creating SXA Variant Components that Work With your Own Templates