Rendering Parameter: Way to Configure Deck – UI Components

Note !!! I have moved my blog to https://pramisoni.wordpress.com/ . Please Visit https://pramisoni.wordpress.com/ for old and new posts.

We all love component based architecture web designs, any component based architecture is collection of multiple UI components just to name few like promotional tiles, informational or feed boxes, carousels etc.,

Because of inherent MVP pattern championed by Sitecore and MVC as technology, our aim is always to create reusable components for our Sitecore projects.

In order to arrange these components on the page while respecting the space between them as mandated by UX design is always a challenge. But before going into this challenge, want to put forth few terms we used, like Deck which is a container for a component where spacing(margins) and other boxing related CSS can be configured.

I think this is the best approach to reuse component where component sequence varies page to page .  Most of the reader must be thinking why sequence should be different and why not same ? The answer is sequence is important when you have lots of components but every page has the different sequence  of components  . So, in this case, all pages will have the different sequence and the random component .

If readers are still not sure why sequencing is an issue while re-using the component, please see following example:

[ Page A Sequence : Component 1 - Component 2 - Component 3 - Component 4 ]

[ Page B Sequence : Component 2 - Component 4 - Component 1 - Component 3 ]

Component 1 has been implemented based on top padding 100px , which is perfectly all right when it is for Page A . But when it comes to page B it does not require top padding because component 4 have bottom padding 100px , which comes before Component 1 . So we don't want 200px of a gap in any component . This is a just example there could be many such differences applicable in various scenarios like the background color of the component.

If you would like to read more about  rendering parameter see my post  Rendering Parameter.

So Let's now get into code how we did it..

In my recent project me and my team  faced similar issue and we tried to solve this issue with rendering parameter in sitecore and we gave name to this concept “deck modifier” . Which means spacing and background color can be changes dynamically of the components .

This option will give pull flexibility to content editors to change decks of all components based on the required space .

Here I have create 2 folder the in Global setting because I know this is going to be used globally for other sites also .

This is just a example . Here I am trying to explain how we can use the beautiful feature

“Rendering Parameter” in sitecore for handling such kind of things which can be very generic and important creation  for all sites .

Now here is sample code how can be manage from code

I am using glass mapper here to get rendering parameter values . This is the way you can get values from rendering parameter and assign this property value to Model to use into view .

Let me explain in a bit more details with some set of examples.

Step 1 . Create a Rendering parameter template with 2 fields [ SpaceCssClass, ColorCssClass ] and give the path to setting folder where you must have to create your setting items for color and space . Note : This template should be inherited by "Standard Rendering Parameter " as its a Rendering parameter template . See the screen shot below .

Step 2 . We have Rendering parameter template , fields, and setting items [ Color and Space] are ready. So next step should be defining "parameter template" in specific rendering / component where you want to apply both settings .

Step 3. Implement "Rendering parameter" functionality in MVC action method . Here I am using Glassmapper so directly using generated model class . If you are new to Glassmapper you can use traditional way to get rendering parameter . Also, you may have noticed that I am using repository pattern here . Again , if you are new for this pattern you may use the traditional way of working .

You can notice here in highlighted , Deck values are coming from "DeckSpaceModifier" [ from sitecore ].

So , Here we are returning both decks values to model and this model will be used in View .  Let's go to view now .

In view , I am just using those values coming from the model . Now let's jump on the page editor view.

  

We have both decks selected as a rendering parameter for that specific component . Don't get confuse with the value of "space deck" in screenshot highlighted is "Deck--w  Deck--Collapse" . Deck.Collapse is just a name which has value inside "Deck--w  Deck--Collapse".

So , It's just a simple code with a little bit of creativity to use rendering parameter to solve this issue .