Beginning Sitecore Development, Part 1 - Dissecting the out of the box Sitecore Home page

Overview

If you are new to Sitecore, the platform can feel a little intimidating. It's a robust platform and has a lot of capabilities, but after you install, knowing how to create pages and add functionality is not always so obvious.

If you have taken the Sitecore certification classes, you may have a leg up in understanding how to do this, but might still be confused on how to combine all of the moving parts into a Visual Studio solution that contains your customizations and is easily deployable.

This series of posts will hopefully shed some light on how to go from a beginner, with or without the background of the Sitecore certification class, to a developer who is creating custom functionality and pages on Sitecore.

There's no place like Home

To start off this series, we're going to investigate the out of the box website created when you install Sitecore 8. It should look like this:

This is a pretty simple page, with a header image, a title, some body content, and a footer. But how did those items get on the page? Let's take a look at the Content Editor to learn more.

The Home Item

When you open Content Editor, you should see a Content node, which contains a Home item. Clicking on it should give some information about the item. If your Quick Info pane is not expanded, click it to see more details about the page.

In this screenshot, I've highlighted a few fields. The first one, Template, tells us that this content item is based on a template located at /sitecore/templates/Sample/Sample Item. I've also highlighted that the item contains two pieces of data, a Title and some Text. The Title is the captain below the header image on our page, and the Text is the body copy that comes just below the Title.

The Sample Item Data Template

Let's navigate to the data template by expanding the content tree until we find the correct item. 

Here we can see that the Sample Item data template contains a section called Data, which contains two fields, Title and Text. If you compare this to the Content Item for our Home page, you'll see that those fields came from this data template. Furthermore, you can see that the fields have specified Types. The Title field is a "text" type, and the Text field is a "Rich Text" type. Notice also that the Text field has a Source property. This property is used to set which editor will be used when this field is edited by a content editor.

If you expand the Sample Item data template in the content tree, you'll see there are some items below it. The Data node below it corresponds to the section and fields you defined in the Builder tab. There will be a node here for every section you define. In addition, you will see the __Standard Values node, which is optional, but is used here to set a default Title value whenever a new content item is created based upon the Sample Item data template.

Home Item Presentation Details

Now we know what type of item we have, and why it contains the properties it does. But how does it get displayed on our website? For that, we need to revisit the Home item and examine the Presentation Details screen.

After clicking the button, you'll see a dialog box that shows how this content item will be presented. 

Click the Edit link for the Default device to see which Layouts, Controls and Placeholder Settings have been set.

On the Layout tab, we can see that this page uses a layout located at Layouts/Sample Layout. We'll come back to this in a moment. Let's check out the other tabs first.

On the Controls tab, we can see that this page has two sublayouts and one rendering defined. We can see for each of them where they should go in the Layout. We'll come back to this in a moment.

If you click on the Placeholder Settings tab, you'll see that none have been defined for this page.

The Sample Layout

If you navigate to the Layout/Layouts/Sample Layout node, we see our first hint of how the Home page might look when it's rendered.

The Path property here points to a file that contains the markup for our layout. This is basically the skeleton of our page. Let's open it up and have a look. It will be located at C:\inetpub\wwwroot\[SitecoreInstance]\Website\layouts\Sample layout.aspx.

In this file, you will notice that some Sitecore specific web controls will be used, and so they need to be registered. In addition, you can see we are setting up an HTML 5 page, setting a title, and including our default style sheet.

The most interesting part of the page, from a presentation perspective, is the last red box, which shows a MainPanel div that contains a Sitecore placeholder control named main. Defining this placeholder is what allows us to add renderings and sublayouts to the page when we edit it. 

If you look back at the Presentation Details for our Home page, the Controls tab has sublayouts and renderings, all of which have a path that starts with "main". That means they will be injected into this placeholder at runtime. Specifically, we see that in the "main" placeholder, we have added a Sample Sublayout. We'll see how the other sublayout and the rendering get added to this hierarchy a little later.

The Sublayouts

To find the sublayouts, navigate to the Layout/Sublayouts node in the content tree. Here you should see both the Sample Sublayout and the Sample Inner Sublayout that are being used by our Sample Layout.

Click on the Sample Sublayout item and scroll down until you see the Data section.

Here we can see that the Sample Sublayout points to a file that contains the markup for our sublayout. Let's open it up and have a look. It will be located at C:\inetpub\wwwroot\[SitecoreInstance]\Website\layouts\Sample Sublayout.ascx. Ignore the Placeholder value in this screenshot. It's not relevant to our Presentation Details.

In this file, you will notice a CenterColumn div that contains a Sitecore placeholder control named centercolumn. Just like in the layout, this placeholder allows us to add other sublayouts or renderings at runtime.

If you look back at the Presentation Details for our Home page, we see that in the "main" placeholder, we have added a Sample Sublayout. Since Sample Sublayout contains a "centercolumn" placeholder, we can now see that in that "centercolumn" placeholder, there is a Sample Inner Sublayout.

If you navigate to the Layout/Sublayouts node and click on the Sample Inner Sublayout item, we can see it points to a file that contains the markup and is located at C:\inetpub\wwwroot\[SitecoreInstance]\Website\layouts\Sample Inner Sublayout.ascx.

Now we can see the pieces starting to come together. In this sublayout, we are including the header that showed up on our page when we previewed it earlier. We are also including a footer. Perhaps most interesting, we are including another placeholder named "content" that you might recall from the Presentation Details for our Home page, houses our Sample Rendering.

If you navigate to the Layout/Renderings/Sample node, you can click on the Sample Rendering item.

In the Data section, in the Path property, you can see this rendering maps to a file located C:\inetpub\wwwroot\[SitecoreInstance]\Website\xsl\sample rendering.xslt.

In this file you can see that we have some parameters that represent the current Sitecore content item. In our case, this would be the Home page. We know that our Home page contains a Title and a Text property, which we can see are displayed here using the sc:text controls.

Summary

We have now dissected the out of the box Sitecore Home page. We have seen how a content item is based upon a data template to create that page. We have also seen how we can use Presentation Details to control how that page is rendered, including a layout, sublayouts and renderings. Finally, we saw how the content tree in sitecore can refer to files on the filesystem that contain markup and xslt, which can display properties from our content item to our users.

Next, we'll take a look at how you use Visual Studio to build custom layouts and controls to use in your Sitecore solution. Continue to Beginning Sitecore Development, Part 2 - Building a Visual Studio Project