In this tutorial, you will learn about a number of essential topics that you will need to master in order to build a website using Sitecore CMS. You will learn about data templates, content, layouts and components.
If you are a developer who is new to Sitecore, understanding what these things are is important. A Sitecore CMS project is structured very differently compared to the majority of CMS projects you will encounter. If you are new to Sitecore and you are still feeling a little overwhelmed with the number of things you need to learn, this is the tutorial for you 🔥🔥🔥
How To Build A Webpage Within Sitecore CMS
A page in Sitecore is built using three main building blocks (known as objects):
- Layouts
- Renderings
- Data templates.
These three things are the building blocks that make up every Sitecore website. The aim of today's guide is to hopefully give you a clear understanding of what each of these objects is used for, where they live in the Sitecore editor and how they can be used to build a webpage within Sitecore.
If you are already familiar with CMS development, you will probably be familiar with a few common buzzwords, like templates and data items. Sitecore uses some of the standard CMS terminologies, however, Sitecore tends to throw a curveball into the mix as well. Within Sitecore, some of the common terms, like a template, refer to something that you might not intuitively expect the term to map to. Sitecore's terminology is definitely different, compared to the usual industry standard definitions, which can make learning Sitecore confusing at times 😱
Sitecore Templates
In web development, a template usually refers to something that is related to the presentation. A template is usually a view, partial view, HTML page, or user control that is used to represent a type of page within the CMS. This is not the case within Sitecore. A template in Sitecore refers to a data schema that defines the data definitions for a piece of content. In Sitecore, a template has nothing to do with the presentation 🤔
The values defined in a data template might be the building block to create a content page, however, a Sitecore template has nothing to do with how that content might look when rendered. If you are used to other CMS systems, getting used to calling a data file a template can talk a while to get used to. This change in definition has definitely caused confusion in meetings and projects when developers new to Sitecore are onboarding onto a project 😕
Templates created within a Sitecore project can be viewed and created from the Templates node in the tree view. Just as a class contains public properties that allow data to be associated with that object, every piece of content in Sitecore will have a data template that also contains properties. Content editors can then use these data templates to create content within the CMS. For example, if you want to allow a content editor to be able to add a Call To Action component onto a page, the first step to the process is to create a new Call To Action data template for it. In terms of content modelling, you will add properties to the templates. For a Call To Action component, you may want to add properties like Title, Button, Button Text, Button Url, Content, Image Url and Image Alt Text.
Another important aspect of a template to keep in mind is that data is not associated with a template. In this sense, templates can be compared to a class in C#. A C# class can contain the definition of an object. It defines the fields and capabilities that an object can use, however, it's only when you instantiate a class that data gets added into the mix. A template, like a class, is just a way to create a definition.
Content
Content is the money shot within the Sitecore component world. Content is the bit content editors care about. A content object is created using a template as a basis. The properties defined on the template will define what content a content editor can create within a content object. This is why when you create a new item of content, the first thing you must do is select which data template to use. Each data template will contain specific properties for different needs, for example, a Contact Us page template might contain a PhoneNumber property or aContent Pagemight contain theMain Content Area` property.
Content objects rarely contain data about how the end page will look. This raises the question if templates and content do not have anything to do with the presentation layer, what does?
Sitecore Layouts
The first component we will look at that deals with the presentation layer, are Layouts. A Layout is comparable to a master page in web forms, or an MVC layout. A Sitecore Layout provides the main HTML structure for a page:
Like an MVC Layout, the standard HTML I would expect to see within a Sitecore Layout would include the sites header, the footer, references to Javascript scripts, CSS references, etc... Layouts are useful in order to prevent you from duplicating HTML and components that are shared between pages. A Sitecore website would be pretty crap if we had to replicate the header HTML on each page.
Sitecore will let us further split up the presentation of the page by using things called placeholders and components
What is a Component / Rendering / SubLayout?
In Sitecore, components are as they sound, small bits of reusable functionality that can be added into a layout to make it more interesting. For example, the site header would be a good candidate to be turned into a Sitecore component, as would the footer. Defining a component is a developer level task that involves writing code. As a developer, a lot of your effort will be focused on defining components 😕
There are two main types of components in Sitecore that you will need to get to know, renderings and sub layouts. If your project is built on top of ASP.NET MVC, you will be using renderings. If you use web forms (Yuk) then you will be using Sub-Layouts. With MVC, we have access to View Renderings, which are just simple MVC partial views. These views are not associated with a controller. You can also create a Controller Renderings. As the name implies these types of components are associated with an MVC controller. If you are using WebForm, the components you will be working with are Renderings for XSLT and Sublayouts Web Controls using .ascx.
PlaceHolders
The next Sitecore concept to discuss will allow us to add components to layouts. In Sitecore, components are added onto a page using placeholders. Placeholders are like content areas. A placeholder is a way to define an area on a page where components can be added. Placeholders are very simple to create. They contain no logic and as the name implies, they are just areas for content editors to add things within the CMS. In Sitecore, you can define as many placeholders are you want on a page.
Placeholders can be configured to only allow certain components onto a page. In this way, you can restrict and define what components and content can be added to certain pages. Placeholders are useful to help enforce standard information architecture. For example, if you have a contact us map, you may only want to allow that component to be added to the contact us page
Within Sitecore placeholders can be re-used on different pages. As developers, we define the layouts that contain placeholder, we then create the components content editors can add to a page and then sit back and let them get on with it 😊
In today's guide, you have learnt about a lot of the basic building blocks required to build a Sitecore website. To build a web page, you need to define what information you want on a page using data templates. Content editors use these templates as the basis to add content into Sitecore. Content editors can then associate a layout with a piece of content to define how it will look. Components can be added to layouts to allow content editors to define how the page will look and its layout. Phew!
Granted, there are a lot of concepts to get your head around. Learning Sitecore takes time and it's definitely more complex compared to a lot of other CMS systems. I hope this has taken you on a little step to help you on the journey to Sitecore mastery. Happy Coding 🤘
