Rendering parameters in Sitecore with example

Rendering parameters can be used to pass parameters to sitecore presentation components. They are used to control the presentation of a dynamic component from page editor.

In the example below, I will demonstrate on how to create a rendering parameters and how to use them in the presentation components. Also on how to change parameter values from the page editor.

###Scenario:###

Consider a web page of an ecommerce site which display product details like product name and description. This component is not editable at sitecore page editor since the product details are retrieved dynamically from external system. So this component can be customized only in terms of look and feel by a content author. So I am going to assign CSS Styles/height/width (or any other presentation details) from page editor using the concept of rendering parameters to this dynamic component by following the below steps.

Version used: Sitecore 7.2 with MVC 5.1

###Step 1: Create new parameter templates

1. Login to sitecore content editor.

2. Go to Templates->Insert->New template and create a new template with some name say ‘ProductDescStyles’. Use the ‘Standard Rendering Parameters’ template as the Base template.

3. Select the new template by clicking on it. Open the Builder tab.

4. Add some section name in the text box ‘Add a new section’, say ‘Data’. Once it is done, we will see new fields coming up.

5. Add 2 new fields with below mentioned values.

   1. Name: TitleCss, Type: Single-Line-Text

   2. Name: DescriptionCss, Type: Single-Line-Text

6. Now, click on ‘Options’ option at the top in the same ‘Home’ tab. And then click on ‘Standard Values’.

7. This will create new standard (or default values) values for the fields we just created. There will be 2 text objects with headings ‘TitleCss’ and ‘DescriptionCss’

8. Give some default values for both of these fields as shown below.

   TitleCss: title-css

   DescriptionCss: description-css

9. Save the template item and publish it.

###Step 2: Update Rendering items with the Parameters template values

1. Open the rendering item which is used to render our product description component say ‘ProdDescRendering’.

2. Go to ‘Parameters Template’ field. Browse and select our new parameter template i.e., ‘ProductDescStyles’.

3. Update the ‘Open Properties after Add’ field to ‘Yes’.

4. Check the ‘Editable’ field option.

5. Save and publish the item.

###Step 3: Update the razor code (.cshtml file)

Assume ProdDescComponent.cshtml is the razor file used for rendering our product description component. Open this file and add the code as shown below. These extra lines of code retrieves the parameters values from sitecore and substitute them here in the html.

ProdDescComponent.cshtml - Before

@model ProductInfo
@{
    <h4 class="title-css">@Model.name</h4>
    <p class="description-css">@Model.description</p>
    <hr>
}

ProdDescComponent.cshtml - After

@model ProductInfo
@using Sitecore.Web.UI.WebControls;
@using Sitecore.Web;
@{
    string TitleCss = string.Empty, DescriptionCss = string.Empty;
    var rc = Sitecore.Mvc.Presentation.RenderingContext.CurrentOrNull;
    if (rc != null)
    {
        var parms = rc.Rendering.Parameters;
        TitleCss = parms["TitleCss"];
        DescriptionCss = parms["DescriptionCss"];
    }
    <h4 class="@TitleCss">@Model.name</h4>
    <p class="@DescriptionCss">@Model.description</p>
    <hr>
}

###Step 4: Update the parameter values from page editor

1. Open the web page in page editor mode.

2. Click on our dynamic (product description) component. There will be a toolbar visible at the top of the component once we click on it.

3. Click on the dropdown option ‘More’ present in the toolbar.

4. Then select ‘Edit the Component Properties’.

5. The fields which we have created in the parameter templates will be coming up here. i.e., the TitleCss and DescriptionCss will be visible along with their default values ‘title-css’, ‘description-css’.

6. If you want to assign new classes, you can directly update these fields with new CSS class names and click Ok.

   Note: Make sure that the new css classes are available in this page. For that, you can directly open the css files and add the new css classs to it.