Here at Delphic they call me “Chef.” I don’t cook (that well) in my personal life, but I sure do whip up some sweet recipes for success here at work. Today, it’s all about Sitecore’s Data Source field on Sublayout controls. Sitecore designed this field to be used to point a sublayout to a specific item to render, like a spotlight rendering control pointed to the spotlight it’s rendering. While that’s a nice snack for the content team here at DD, I needed to cook a bigger meal – one that could point a rendering control to a field that has all the spotlights we want to show on that page.
Sitecore Spotlights: 101
First, I need to show you how Sitecore designed the Data Source property to be used. My examples in this post will be about Promos/Spotlights. You’ve seen them on websites – they’re small pieces of content/creative promoting different sections or additional information about the page you’re on, usually in the left/right column or in the lower section of the page. Here’s one:
Setting Sitecore Spotlights the Sitecore Way
To set spotlights on the page, there are a few ways to do it. One way is to assign a sublayout a data source pointed to one of the spotlights, then the sublayout just has to render that spotlight. That would look a little like this:
- Add the sublayout control to the Presentation Details of the page, setting the Placeholder to where you want the control to show on the page.
- Open the page’s Presentation -> Details window and add your Spotlight sublayout control, making sure to set the Placeholder value of where it will show on the page.
- Next, set the data source of that control to the spotlight that you want to render.
- Open up the Spotlight control’s Properties by selecting it from the list of presentation controls and clicking “Edit.” :
- You’ll see the Data Source field in the list of properties now. Click “Insert link” to open a site tree where you can find your Spotlight item you want to render.
- The code for the rendering control is pretty simple. First make sure you have a parent that is a Sublayout object, and that the Data Source has a value of something. Once you know you have a Sublayout parent, grab the item that the Data Source is pointed to. If that works, then point your Literal to that item.
if (Parent is Sublayout && !String.IsNullOrEmpty(((Sublayout)Parent).DataSource))
Item item = Sitecore.Context.Database.GetItem(((Sublayout)Parent).DataSource);
if (item != null)
litText.Item = item;
this.Visible = false;
this.Visible = false;
Okay, now you know how Sitecore intended for the Data Source property to be used and how you can use it for rendering spotlights, I’ll show you how to make it better in my next blog post.