Layout

In previous posts, we learned all about templates, how to create a field, inheriting from another template, and setting default values using Standard values.

Once we have a template created, we need to output the field content on pages/modules. This is where Layout comes into picture, layout is all about the presentation information, and also using which we make the connection between Sitecore and .NET code.

One of the beauty of Sitecore is, as a developer, we have full control on the page HTML.

Let’s have a brief look at page execution, Whenever a user browses for a page, Sitecore locates the particular content item, executes it’s layout, and all the required components, gets the html, and send it back to client to render it on the browser.

In Sitecore tree, all Layout related items reside under Layout node.

layout

From presentation perspective, every page item, contains two things,

1. Layout

Each page item has a single layout, which contains the information about basic page structure, and which would be common among all the pages, like htmlhead and body tags.

In ASP.NET web-forms the layout file would be of .aspx extension, where as in ASP.NET MVC, this file would be of .cshtml extension.

In Sitecore tree, all Layout related items reside under Layouts node.

sitecore-layouts

2. Components/Modules

In Sitecore, pages contain lot of components, like carousal module, or a generic callout, or any banner module. All these components would be independent from the page, so that they can be placed on any page. In Sitecore these are also called as Sub-layouts(web-forms) or Renderings(MVC).

One page can have any number of components, and a same component can be added to multiple pages.

In ASP.NET web-forms the component would be of .ascx extension, where as in ASP.NET MVC, this would be of .cshtml extension (or a Controller’s action method).

All Sub-layouts items reside under Sublayouts node.

sitecore-sublayouts

All rendering items reside under Renderings node.

sitecore-renderings

In coming posts, let’s explore each one more deeply.

Happy Learning 🙂