As I explained on how to install Sitecore and setup new project in my previous posts, Now it’s time to drill down on the Sitecore default home page. Let’s explore it’s Template, Layout, sub-layout, Content Item etc. At last we will see how the Content Author can change the text using Content editor.

Before we move further, few of you may not be convenient with terminology (template, layout, sub-layout) but no issues just follow the steps, we will discuss more about each topic in coming posts.

If we load the newly installed Sitecore website, we can see the below page, as the website home page.

sitecore-default-homepage

Now let’s look into each and every aspect from Sitecore side, first let’s login into Sitecore using admin/b credentials,

From Launch pad, navigate to Content Editor, by directly clicking on the Content Editor option, or through Desktop option, it is a good practice to go from Desktop, as we can open multiple windows, and navigate among them, similar to windows desktop, and also having start menu. This is not possible by directly selecting Content Editor option from Launch pad.

sitecore-desktop

If you click on Desktop mode, select Sitecore logo/start button and select “Content Editor” option.

start-menu

In Content Editor, navigate to the Home content item (/sitecore/content/Home),

default-home-content

Data Template:

In Sitecore, every content item is created from Template. Template contains field definition, and presentation information. Some say “Templates are like class definitions. Content is like an instance of that class.”
In Sitecore tree, all the templates are present under sitecore/Templates

For the default “Home” page Template is already present in Templates section. We can see the Template name, In Quick Info section, which is Sample Item in this case. By clicking on the template name, we can navigate to the template item.(if you opened in Desktop mode, Template will be opened in new window, else on the same window) or we can navigate to the template using its path /sitecore/templates/Sample/Sample Item.

template-structure

By looking into Sample Item Template’s Builder tab, we can understand that there are two fields defined in it, which are Title (text Type) and Text (Rich Text Type). Field Type determines the control to manage the content by content author using the editing interface.

template-fields

Standard Values for a particular template, lists all the fields including inherited fields. All the presentation details are assigned on Standard values.
For all the page templates, we have a presentation, where we can assign a layout and components (sub-layouts). On request of a web page, Sitecore assembles the page dynamically from it’s content and the presentation components.

template-presentation

Presentation:

Now let’s look into presentation components, both layout, and sub layouts. All the layouts, sub layouts, renderings (in MVC), will be present under sitecore/Layout in the Sitecore tree.

layout

From Sample Item template presentation, we can see that there is one layout (Sample Layout), and three components (Sample Sublayout, Sample Inner Sublayout, and Sample Rendering).

presentation

Let’s explore Sample Layout first, which is present in sitecore/Layout/Layouts/ path. Layout is kind of master page in ASP.NET terminology, where we have basic html tags are added, and placeholders are defined. On Click of Sample Layout item, we can see the Path field, there is a .aspx page path is given, which contains all the HTML code with respect to the page.

main-layout

layout-path

If we observe the layout code, we can see that HTML tags are present and also a placeholder with key as main is added. This is the placeholder where, other page components are going to be embedded.

layout-code

Similar way if we look at Sample Sublayout item, which is under /sitecore/Layout/Sublayouts. This is an .ascx file.

sublayout

sublayout-code

Similar to this component, other page components also have code files with respect to them.
ASP.NET webforms -> .ascx files
ASP.NET MVC -> Controller rendering, or View rendering.
XSLT -> XSL Rendering

If we look at the Sample rendering which is a xsl rendering, this is where we are rendering both the fields, ‘title’ & ‘text’, which are created in template.

xslrendering

xslrenderingcode

Now let’s get back to our home item, where we have already content present for both the fields, which we can see on home page.

conten-output

Till now we have seen Templates, Standard values, presentation, layout, sub-layout and renderings. Stay tune to this space for my next posts to discuss more detail on each item we used in home page.

Hello World

We will try changing the Title field content to Hello World, and verify that text is changing on home page or not. After making any change, we need to publish the item; As I discussed earlier our changes will save in to Master database. On Click of publish latest modifications/final content gets pushed to web database. Refer Below screenshot for final output we are expecting. Hello world is indeed appearing on home page.

helloworld-content

Sitecore supports both ASP.NET web forms and MVC, but default home page comes with all web forms related code. Currently most of new Sitecore implementations are done in MVC. So in coming up posts, we will always try to see the code examples in MVC.
ASP.NET web forms is still very much in picture, because lot of implementations till now are done in web forms. Whenever we are maintaining those applications, web forms knowledge is very much required.
That’s all for this week.

Happy Learning 🙂