Articles in this series

 

Part 1: The requirements
Part 2: Installing Sitecore and setting up a Visual Studio solution
Part 3: Architecture
Part 4: The basic layouts
Part 5: Identity and documents
Part 6: Navigation
Part 7: The homepage - content oriented spots
Part 8: The homepage - presentation oriented spots
Part 9: News
Part 10: Search
Part 11: Deploying the solution 

The identity component

 

So we need to build functionality to give the website an identity. This includes a header with a logo and a footer where the address and other general information of the company can be placed. We want this information to be editable from Sitecore, so that the content authors can change this as they like.

 

Creating the templates

We don’t want the information to be set on every single page, but globally for all pages on the website. Where this information is stored can be discussed. The two most obvious places are:

 

1. Create a setting template, which holds global settings for all components including the heading and footer content
2. Add the information to the root of the site.

Personally I think header and footer content are part of a site, so I like to place the content together with the site. So I will create templates so that the content is placed on the root of the site.

The first thing we want to define in the identity component is the fields holding the content. These fields should be created in the component it belongs to - Identity. At first we need to create a data template holding the fields, which are needed. The root of the site can then inherit from this template and in that way hold the content.

So go to and create a template under /templates/components/identity called “_identity” or similar. The reason for the “_” prefix, is that I like to clearly distinguish between data definition templates, which is used as base templates and presentation templates, which only holds presentation. It is good to keep these things separate, as you don’t want to mess presentation and data together. A “_” prefix denotes that the template is a data definition template.

 

When the template is created we want to start defining the fields. When defining fields you need to choose what type of field, should be used. Sitecore holds a lot of different fields and you need to use different fields for different type of content. For the identity template we want the content author to define a logo and a text for the footer. So we need two different fields. For the logo we are going to select an image field and for the footer a Rich Text Field (as we are going to allow the content author to insert links and other HTML in the text.)

 

 

Notice how the fieldnames are prefixed with the component name. This is a best practice you might want to follow. As the component itself doesn’t know where it is going to be used, we don’t know if the fieldnames are going to conflict with fieldnames from other components. If you prefix the fieldnames with the components name, you ensure that such conflicts don’t happen.

 

 

Now that we have declared the data template in the component, we need define a template that can inherit from it. As earlier mentioned we want the fields to appear on the root node of the site. This means that we are going to have to create a template for the root. So in which component does this template belong? Well, it depends on the complexity of your solution. You could argue that a separate component is needed for everything which is associated with the context of a site – for example settings and the root. But as this is a simple site, I am going to create the template in the PageType component. Even though the root of the site isn’t going to hold any presentation in itself, it is a type of organizing template, which pulls the different components together, which in my opinion is a valid argument for placing it in this component.

So create a template in the PageType component and let it inherit from the _Identity template we just created:

 

 

I choose the name WebsiteRoot and clicked the options tab and then base templates to select the _Identity template which we inherit from.

The templates in the PageTypes component are the templates which the content author is actually creating items from. Therefore it is important we ensure the best usability by defining user friendly display names and icons. Read more about that in the article Helping the editors.

 

 

 

The same goes for the fields we created on the _Identity template.

 

 

Now that we have the templates, we can create a content structure, so it is easier to test our work. Go to the content node and create an item based on the WebsiteRoot template. Then create an example page under that node – based on the NormalPage we created in part 4 of this series.

This should give you something like this:
 

 

 

When we create the final website, the content will be different, but this is all we need for testing the identity components. To test it we need some example data, so fill in some values in the identity fields on the SimpleInfoSite node:

 

 

Now that we got the templates and the content in place, we can start work on the presentations.

 

Sublayouts or renderings?

 

The first thing you need to decide, when building the presentations, is whether you want to use a sublayout or a rendering.

A rendering are based on XSLT, which means that it can (or should) be used for presenting content only. It should contain no logic or actual functionality. A sublayout is a .Net web user control which gives you completely free hands to do whatever you want – also presenting simple content. So what should you use?

After 5 years of Sitecore development, I must admit that I prefer sublayouts over renderings for all purposes. This is due to the flexibility of the technology. Even if you only want to present content, and an XSLT would be sufficient, it tends to get more and more complex over time and the XSLT gets stretched and bended for serving means it wasn’t build for. You can read more about common pitfalls in Sitecore here  . So when building larger web solutions, I use sublayouts for almost everything. However XSLT has one great advantage: It is great for rapid development. As this is a simple information site, we are going to use them for the simpler presentations.

 

Creating the presentations

We are now ready to create the presentations and lets start with the header presentation. As all presentations in each component should be created in its corresponding component folder, we need to create a folder structure under the /sitecore/layout/renderings node. So go ahead and create a components and Identity folder. Further we need to create a similar structure in the file system under components. You should now have something like this:

 

 

Now we are ready to create the presentation, so go to the Sitecore Developer Center - available from the start menu. Now click “Create a New XSLT Rendering”. The dialog will now ask you for information like the name and where it should be placed. We are going to name it “Header” and place both the rendering item and the xslt file in the right component folders.

 

 

We are not going to use the text editor in Sitecore to alter the XSLT, so close the developer center and go to the Visual Studio solution we created earlier. Add a new ASP.NET Web Application in the same way we did for the other components in the last part. Now include the already created Heading.XSLT:

 

 

Now we can get started developing. There isn’t much to develop though. All we need is to present the image, which is defined on the root node of the site. So the first thing we need to do is get hold of the root node. This should work no matter which item is being presented, meaning that we can’t get the immediate parent, as some of the items may be on a deeper level in the content structure. Therefore we must look upwards in the tree and find the first node, which inherits from the _Identity template (where we defined our logo field). To move upwards in the tree we can use XPath and anscestor-or-self (read more about xpath here). To check if an item inherits from a specific template, Sitecore provides an XSLT method called IsItemOfType, so we can use this. This means we can declare a variable, which holds the root node like this:

 

< xsl:variable name = "siteRoot" select="ancestor-or-self::item[sc:IsItemOfType('_Identity',.)]"/>

 

By finding the root like this, we create no dependencies on other components and the identity component knows nothing about the WebsiteRoot template.

Now we have a variable containing the root item, we can read the value from the image field. This should be done by using the Sitecore XSL control sc:image, as this also renders the alt text and other properties set on the image. We can then render the logo like this:

< div class = "Logo">

  < sc:image select = "$siteRoot" field="Identity_SiteLogo"/>

</ div >

 

That is actually it. We have now finished the heading presentation. Simple and easy right?

 

Now we can create the footer in a similar way. Go to the Developer Center and create a new XSLT called footer. Place the item and file in the Identity component and include the XSLT in the Visual Studio solution. Your solution should now look something like this:

 

 

We also need to get hold of the root node when rendering the footer, so we are going to declare the siteRoot variable again in the same way as in the header rendering. Then we just need to render the HTML from the RTE field. This can be done by using the sc:html XSLT control Sitecore provides, which should give you an XSLT looking like this:

 

< xsl:template match = "*" mode="main">

  < xsl:variable name = "siteRoot" select="ancestor-or-self::item[sc:IsItemOfType('_Identity',.)]"/>

  < div class = "Footer">

    < sc:html select = "$siteRoot" field="Identity_FooterText"/>

  </ div >

</ xsl:template >

 

 

This will render the HTML entered in the Footer field of the root node.

 

 

Applying the presentations to the page

Now that we create the presentations, we need to inject them on our test page. This is pretty easy. Go to the NormalPage template we created in the last part and select the __standard values item. Now click the presentation tab and click the button “Details”. We can specify the presentations by altering the presentations for the default device by clicking “Edit”:

 

 

Go to “Controls” and click add. We can now add the Heading and Footer controls and by specifying the placeholder to the placeholders we defined in the last part, they will get injected the right places.

 

 

Do the same thing for the footer control except that you should specify the placeholder FooterRegion. When you have done that, you can now publish and check out the test page:

 

 

Great! We are now ready to move on.

 

 

 

The document component

This component is responsible for presenting standard content on the site. Therefore we need to identify which fields should be present on a content page. Normally this is done by looking at the design, but as we don’t have that, I am going to define, that we only need three different content fields: A Title, an abstract text and a content field. This is a little like the fields we have on Learn Sitecore:

 

 

So why isn’t the author, the date, the image and the level a part of the document template? Well this isn’t relevant for the document component. The component is only responsible for actual content, while the fields I just mentioned relates more to metadata than content and therefore belong in another component.

 

 

Defining the document templates

Now we are going to define the templates that make up a document. To ensure that we don’t get duplicate fields for the same functionality throughout our solution, we are going to inherit from the document component whenever document content is needed. For instance we don’t want to declare different title fields for news items and document items. This will over time make your solution hard to maintain and you can consider the issue like having duplicate code in your solution… not a good idea.

As we are going to inherit from the document templates to define content in other components, we need to think about how the content fields should be divided. We are going to have a lot of pages that are going to need the title and abstract field, but not a content field – such as the sitemap. The sitemap will have a title and an abstract text, but instead of having a content field, it is going to have a separate control for the sitemap. This means we should be able to inherit from the content in the top without inheriting the rest of the content fields. That is why we will create two templates: A _documentHeader and a _documentContent template. The _documentHeader will contain the fields Title (a single-line text field) and abstract (a multiline text field), while the _documentContent template will contain the content field (RTE field).

 

The last thing you need to do is set userfriendly titles and sort order on the field, so the content authors are having an easier job using your system (read more in helping the editors).

 

 

The presentations

Now that the templates are created, we can start on the presentations. In the same way we have divided the templates into two, we are going to divide the presentations into two. In that way we can reuse the renderings later on, even though we have only inherited from one of the templates. So let’s go ahead and create the renderings – documentHeader and documentContent. As this is simple presentations we are going to use XSLT again – which you already know how to create and add to a separate Visual Studio project. You should end up with something similar to this:

 

 

Now we can start developing. First the documentHeading:

 

< xsl:template match = "*" mode="main">

  < div class = "DocumentHeader">

    < h1 >

      < sc:text field = "Document_Title"/>

    </ h1 >

    < div class = "Abstract">

      < sc:text field = "Document_Abstract"/>

    </ div >

  </ div >

</ xsl:template >

 

As you can see this is quite simple. Both fields are text fields so we can just use the sc:text control, where we specify which fields content should be pulled from.

The documentContent is even simpler:

< xsl:template match = "*" mode="main">

  < div class = "Content">

    < sc:html field = "Document_Content"/>

  </ div >

</ xsl:template >

 

That’s it! We just use the sc:html control to render out whatever HTML is stored in the Document_Content field.

 

 

Adding the presentations to the page

To test the presentations we need to let the NormalPage from the PageType component inherit from the document templates, so we can fill in the content:

 

 

Further we need to inject our new presentations by adding the controls to __standard values item (like we added the heading and footer):

 

 

And then finally enter some content and publish. Then we can test it, and depending on what you entered as content, you should see something like this:

 

 

Congratulations you have now created two more components and can actually create content on the site.

 

You can download the source code and a Sitecore package here.