Reusing Sitecore Sublayouts on a Single Item

Sometimes your site design may require that the same element be reused multiple times on a single page.  Great examples of this are ad slicks, or promotional callouts - it's very conceivable that you'd have multiple promotions on a single page.  To minimize development / maintenance efforts, the best way to accomplish this is to create a single sublayout and reuse it multiple times on the given page.  The challenge in reusing Sitecore Sublayouts becomes how to differentiate the data source for each of the instances of the sublayout.  One method of differentiating the data source is to let your users pick a data source dynamically through the page editor.  However, this action might be considered advanced depending on the skillset of your user.  This method is also dependent upon your code being set up properly so that the Sitecore page editor actually works.  In the case where the developer will not be able to always determine the data source for any of the given sublayouts, this dynamic data source picking is really your only option.  But in some cases, you as a developer may be able to pinpoint the source you need for each instance of your repeated sublayout.  In these cases, there is an easy way to set up your presentation layer, and add a few lines of code to help your sublayouts determine where to find the data they need.

Take the example of having a page that has two promotional callouts.  One callout will be at the top of the page, and the other callout will be at the bottom of the page.  If we design one "CalloutPromotion" sublayout, our intention is to re-use it twice on the same page.  For the sake of this post, we'll say that each of the callouts is a single line text field defined within the page template - one field is "TopCallout", the other is "BottomCallout".  When assigning your presentation layer to your page template's standard values, add your CalloutPromotion twice - most likely having to specify a different placeholder for each to fill in.  After you have added the sublayouts, if you click on each instance of your sublayout in the presentation details dialog and click the Edit button, you can now edit properties specific to each instance of that sublayout as it relates to your individual page template.

Scroll down to the bottom of these properties and you will see a Parameters section:

You can enter whatever parameters you like in these boxes - they serve like a Key-Value pairing.  For our example, we will create a Key of "FieldName", and then populate the value with either "TopCallout" or "BottomCallout" depending on which instance of your CalloutPromotion you're editing.  When we're done, the CalloutPromotion that is to be displayed on the top of the page will look like this:

Now that we have set the parameters through for our presentation details, we simply need to code our CalloutPromotion sublayout so that it reads from our FieldName parameter.  In your Sublayout cs (code-behind) file, this can be done with the following (assumes frCallout is a FieldRenderer):

//Determine if Callout is being used as top callout or bottom callout.
string rawParameters = Attributes["sc_parameters"];
NameValueCollection parameters = Sitecore.Web.WebUtil.ParseUrlParameters(rawParameters);
string fieldName = parameters["FieldName"];

//Populate FieldRenderer with appropriate data
frCallout.FieldName = fieldName;
frCallout.DataSource = Sitecore.Context.Item.Paths.FullPath;

You now have a single sublayout control that can be reused numerous times on the same page!