Sitecore – Add true cascading (CSS) and increase reusability with Rendering Parameters

If you are just starting out as a developer in Sitecore, you may be swimming in all the architectural directions that Sitecore can go.

One approach would be to consider setting up custom rendering parameters to extend the use of your renderings and sublayouts by providing an HTML wrapper around them.

If your project contains several modules that use the same templates but require different sublayouts, this may be the answer.  This approach relies on the CSS to do the heavy lifting, creating a single sublayout but wrapping it with a flexibly-classed div that allows the CSS to manipulate the layout to fit each unique design.

This approach can save lots of time if you do have several modules using the same template.

NOTE:  In the example below, we are using MVC and also the ORM, GlassMapper. This approach can be accomplished in web forms without an ORM as well.

Let’s start with an illustration of the end result sublayout first.  It’s always nice to see where we are going before we get there.

finished mvc markup

Above you see the sublayout (it can be any markup) wrapped in a div with a variable class.  We will add code to populate “specificClass” in a future step.

When this sublayout is consumed, the content editor will pick from a pre-defined list of descriptive classes within the Presentation->Details of the item.

Rendering Parameters dropdown

Here we see a general sublayout (called “Call To Action Base” with a rendering parameter dropdown list called Specific Module.  This list is made up of terms that would be familiar to the content editor to customize this module with the correct CSS.

The dropdown list is simply a name/value collection of the terms matched to the developer’s CSS class.

setting up rendering parameters dropdown

To create this “Specific Module” field and make it available to the module, we need to create a new Rendering Parameters template by inheriting a new template from the Standard Rendering Parameters base template.

rendering parameters template

This new template is now assignable to the sublayout module under the Layouts section of the tree. Pick the new template under the Parameters Template field.

Make sure to select ‘Yes’ on the Open Properties after Add field to ensure the content editor sees the field each time they place this sublayout on the page.

sublayout setup

Now we are ready to code within the specific sublayout and grab this new “specificClass” value:


string specificClass= string.Empty;
var renderingContext = Sitecore.Mvc.Presentation.RenderingContext.CurrentOrNull;
if (renderingContext != null) {
var parms = renderingContext.Rendering.Parameters;
specificClass = parms["Specific Module"];
}

Within MVC, we have access to the Sitecore.Mvc.Presentation.RenderingContext’s collection of parameters.


string specificClass= string.Empty;
var attributes = WebUtil.ParseUrlParameters(Attributes["sc_parameters"]);
if (attributes != null) {
specificClass = Sitecore.Context.Database.GetItem(new ID(attributes["Specific Module"]))
}

In web forms, we have access to a name/value collection of the parameters, called sc_parameters.

Once this value is assigned to the div tag wrapper, we have extended the life of a module to limitless styling configurations!

finished mvc markup