Level: 100
 

Simple information site in Sitecore – part 5: Identity and document

XSL image

This is the fifth part of the article series in 11 parts, describing how to build a simple information site in Sitecore.


In this article we’ll go through how you can build the identity component including the footer and the header. Further we’ll go through how you can build a basic document page. We will introduce a couple of new components and start creating templates for content.

Written by: Jens Mikkelsen
Tue, Apr 13 2010

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.

Identity 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.)

 

Identity fields

 

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:


 

Identity inheritance

 

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.

 

Website root display name 

 

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:
 

Content structure

 

 

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:

 

Siteroot Content

 

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:

 

Identity rendering folders

 

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.

 

Placed header

 

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:

 

Include headind

 

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:

 

Solution after footer

 

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”:

 

Alter presentation

 

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.

 

Add header control

 

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:

 

Site with header and footer

 

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:

 

Fields 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).

Document templates

 

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:

 

Document parts

 

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:

 

Inheriting from template

 

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

 

Document Add presentation

 

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:

 

The status

 

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.

 

 

 

 

Please rate this article


8 rates / 3,88 avg.

  • About the author:

    Jens Mikkelsen

    Jens Mikkelsen is a partner at Inmento Solutions a Sitecore consulting firm. He works as a Sitecore specialist and consulting helping clients architect and build quality Sitecore solutions using the newest modules and tools. 

    Further he has been deeply envolved in various complex solutions and has built up a strong knowledge of Sitecore architecture and best practices. He has especially focused on and is specialized in debugging and analyzing Sitecore solutions.

     

    Jens is very interested in the technical mechanisms in the new marketing products such as Sitecore DMS and Sitecore ECM.

    My Sitecore Freelance CV

21 responses to "Simple information site in Sitecore – part 5: Identity and document"

I found this which likes GetItemsOfType() better: http://briancaos.wordpress.com/2008/11/05/poor-performance-with-scisitemoftype/

I am trying to follow the article only use SubLayouts instead of renderings but am not sure the best way to get at that ancestor that is of type "_identity". I am just iterating through the ancestor collection right now, but I think there must be a better way.
Posted: Sunday, April 18, 2010 12:32 AM
Hi James,

Yes, I work with Brian and we discussed it, when the method was first made available. I think Sitecore has improved the performance and we use it in our solutions. But if you like you can implement your own XSL extension, which caches the result.

Great to see you are working with sublayouts! Don't worry so much about iterating through the ancestors, it will most likely not be a performance issue. Sitecore caches the items, when they have been accessed once.

Remember what Donald E. Knut said:"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil" (http://en.wikipedia.org/wiki/Program_optimization) :o)

Let me know if that doesn't answer your question or if you have others.
Posted: Tuesday, April 20, 2010 10:19 PM
jens this has been an excellent series and am looking forward to the next article in the series. i have the honour of designing the templates and content tree for our company. before reading through these i was very confused about where/how to start - but this has clarified a lot of points and given me some direction :-)

when will the next installment be available?

keep up the good work!
Posted: Thursday, April 22, 2010 6:03 PM
An excellent starter guide for Sitecore noobs like me. I hope the next article comes out soon!
Posted: Wednesday, May 19, 2010 4:34 PM
Hi Jens,

First of all, this series of articles really changed our Sitecore development. Keep up the good work!

Sitecore training advises you to hard code the parts that you would usually put in a Master page like the header and footer. This does not really match with the component based development as described in this series.

Does the way described in this article lead to a performance decrease? What is your take on hardcoding vs. assigning sublayouts and renderings?
Posted: Tuesday, June 01, 2010 1:55 PM
Hi Martijn,

Thanks for the great feedback! It motivates me to finish the series :)

Personally I would never (or very rarely)hardcode any presentations into (sub)layouts. By doing so you lose the flexibility of the Sitecore rendering engine which uses a sort of view injection (which in my opinion is superior to master pages).

I have never seen a noticable performance impact of any kind by assigning presentations instead of hardcoding them.

However it can be a bit tedious to specify all presentations on every page template. For instance if you have a header consisting of four renderings, a footer consisting of three presentations, etc. it can be hard to maintain and tiring to assign them to every template. That is why we use composite layouts. You can read more about them here: http://mcore.wordpress.com/2009/07/22/composite-layouts-%e2%80%93-keeping-your-stuff-together/

Cheers
Jens
Posted: Tuesday, June 01, 2010 4:45 PM
Jon
Hi Jens

Many thanks for the series so far, it's really made me think things in a different way!

Just one question, which is more to do with Visual Studio (2008) than Sitecore. When creating all the different projects, how do you get controls referenced in the web.config (such as ) to work with IntelliSense etc without having to add the web.config to each project?

Many thanks
Jon
Posted: Wednesday, June 16, 2010 3:50 PM
Hi Jon,

I don't think I use the intellisense for sc tags, so I am not sure about that one.

However for component specific settings there is an issue for the web.config. In Pentia we have developed a tool as part as our build environment called Config merge. With this tool you can specify nAnt like scripts, which merges configurations into the web.config. In that way we can specify component specific scripts.

As you don't have this tool, I would include the web.config once in the solution using a VS solution folder and then add the configurations directly to the web.config. As this isn't optimal you should include documentation for config changes for each component.

Hope that answers your question just a little bit. Let me know if you have further issues with it.
Posted: Friday, June 18, 2010 12:30 AM
Hi guys.

The next article is now ready. Enjoy!

Cheers
Jens
Posted: Friday, June 18, 2010 12:31 AM
Hi
Thanks for this article.
However I have had some problems making this part work, especially with the renderings.

Is there a help section at this homepage (learnsitecore.cmsuniverse.net), where questions can be asked?
Posted: Thursday, February 10, 2011 11:59 PM
I think there may be a little mistake in this article.
I can't see how it is possible to view the SimpleInfosite in a browser, since no layout was ever attached to it.
Posted: Wednesday, February 16, 2011 1:11 AM
Hi Mohammad,

Thanks for your comment. The layout has been attached to the standard values. If in doubt please download the package and install it, to see how it is setup. If you have any further questions, please feel free to add further comments.

Cheers
Jens Mikkelsen
Posted: Tuesday, March 01, 2011 1:48 PM
Yes right!
Sorry about that and thanks for your answer.
Posted: Tuesday, March 01, 2011 3:54 PM
Al
Maybe I'm missing something but I can't seem to find where to launch the Sitecore Developer Center needed to create the XSLT rendering in this article. I checked my start menu and don't see it there, nor did I really expect to since I setup the Sitecore instance manually from the zip as indicated in an earlier (i.e. created the IIS website, attached to the DB files).
Do I need to run an installer to get the developer center setup or is there a magic url off the instance I already have running for me to open it?
Thanks
Posted: Friday, April 01, 2011 7:48 PM
Al
Well I couldn't find how to launch the Developer Center but I was able to just add the Header.xslt and Footer.xslt files into the Identity project, add the Xsl renderings and then update the path fields on them. Oh, and thanks again for this series of articles.
Posted: Friday, April 01, 2011 10:05 PM
Hi AI

With regards to finding the Developer Center it does not matter how you installed Sitecore. When Jens writes the start menu he actually means the Sitecore menu. It can be found in the lower left corner of the Sitecore desktop. So make sure that you choose to login to the desktop and not the content editor when logging in to Sitecore.
Hope that helps.

-Jimmi
Posted: Saturday, April 02, 2011 3:40 PM
Al
Thanks Jimmi, I hadn't noticed the other login areas. Unfortunately my installation is hanging when I try to log into the desktop (though I can log into the Content Editor and Page Editor fine) but I guess it's likely just an issue with my local install. Thanks
Posted: Monday, April 04, 2011 4:43 PM
I am learning site core and I have follow your tutorial for some reason I can't refer to the CSS file create in the Design project In visual studio I can see the css but I can't see it when I preview my testpage. I believe that you have skip the the part were you include the design folder in the project
Posted: Tuesday, April 26, 2011 8:00 PM
Hi Marie,

If you take a look at the previous article, I refer the .css from the main layout. So you should just link to it, as you do in all other HTML sites.

Hope that helps.

Cheers
Jens
Posted: Tuesday, April 26, 2011 8:37 PM
Unrecognized tag prefix or device filter 'sc'.....
not able to bind the images in the "MainLayout.aspx" page.

Please suggest, where i am wrong!
Posted: Thursday, April 26, 2012 9:04 AM
I am a beginner of sitecore and learning the sitecore. This website is very helpful for a beginner. gr8 job.
Posted: Friday, May 11, 2012 8:28 AM

Leave a reply


Notify me of follow-up comments via email.
 
 
#nbsp;