Tuesday, June 2, 2015

Tutorial: Creating a Sitecore 8 Website Part 4 - Layout and Sublayout File Creation

Introduction

For a Sitecore item to render in the browser it needs to have a layout associated with it. This layout is effectively a master page which includes the HTML/CSS along with the output of Sitecore data (via code). A layout can also have a number of sublayouts included on it, sublayouts are really the building block of the web page. For example the layout would have a number of placeholders which then can host sublayouts (such as a navigation, banner, content, form sublayout).

These layouts and sublayouts need to be created as user controls in Visual Studio, then registered in the CMS and ultimately assigned to the item templates. In part 4 of this tutorial series we are going to create a main layout and a number of sublayouts in Visual Studio.

Creating the main layout

Open up the MySitecoreSite visual studios solution from part 1. For this tutorial I will be using the clean blog design, available from Start Bootstrap (mirror of download available here). To integrate this into the solution, follow these steps:

  1. Delete: the mail folder, about.html, contact.html, LICENSE, post.html, README.md
  2. Create a folder in the root of the project called "Resources" and place the following folders inside it (remember to include these in the project):
    • css
    • fonts
    • img
    • js
    • less
  3. Create a folder named "Layouts" in the root of the project and inside it add a new Web Form called MainLayout.aspx.
  4. On the MainLayout.aspx page use the following code (taken from index.html):

You will notice that there is a registration included for the Sitecore namespace and that 2 Sitecore placeholders have been defined (TopNavigation and Main). These placeholders will allow us to add sublayouts onto the layout in Sitecore. There is also a field output in the title tags, with DisableWebEditing set to true because meta tags can't be edited in the browser by content authors. For on page text fields, this value would not need to be set and the user could edit the fields on page.

Creating the sublayouts

In the root of the project create a folder named "Sublayouts" and add a new Web Forms User Control named "MainContent.aspx". On the control add in the following code:

This is simply outputting the HTML from the Content field on the ContentPage Sitecore items. For more advanced logic you would use C# code to get the fields, perform logic and then output to a repeater or other control.

Create the following Web Forms User Controls in the same Sublayouts folder.

  • DestinationContent.aspx

  • Navigation.aspx

In the navigation code behind we are getting the main Sitecore content item (by GUID - you will need to update to the GUID for your content item). Then we get all of the children of content and add them to the list of menu items. This list of menu items is then bound to the repeater on the user control. For an example of a multi level menu, please see C# nested repeater for a menu with child items.

Now you can publish the solution to your Sitecore web site, this can be done by right clicking on the project and clicking Publish. For instructions on how to set this feature up, see the "Publishing the solution to the Sitecore web site" section on Sitecore setting up a visual studio solution.

A zip file of the visual studio solution, can be downloaded here.

Next step

The layout and sublayout files have been created in visual studio and published to Sitecore. Part 5: Layouts and Sublayouts With Templates now goes into the detail of registering these layouts/sublayouts in Sitecore and assigning them to the relevant templates.

7 comments:

  1. Hi Ryan,I am getting two error using the last code block above. Not a programmer, just trying to get Sitecore shows the Travel page.
    Error 1 The type or namespace name 'Database' could not be found (are you missing a using directive or an assembly reference?)
    Error 2 'System.Web.UI.Control.ID' is a 'property' but is used like a 'type'

    ReplyDelete
    Replies
    1. Hi Ratnesh,

      I have updated the code sample above to include the using statements. Adding 'using Sitecore.Data;' in particular should fix both of these errors.

      Thanks,

      Ryan

      Delete
  2. Ryan,
    Thanks a lot. I was able to complete all the setup. However after publishing when I preview the home or open the site in new browser. I get a message on the top left corner "Insert your controls here.". Not sure what is causing it but I followed your document correctly and checked the setup multiple times. Do we need to use any rendering.

    ReplyDelete
  3. Ryan,
    Thanks a lot. I was able to complete all the setup. However after publishing when I preview the home or open the site in new browser. I get a message on the top left corner "Insert your controls here.". Not sure what is causing it but I followed your document correctly and checked the setup multiple times. Do we need to use any rendering.

    ReplyDelete
  4. Completed the setup, checked multiple times. Published multiple time. When tried to preview the site or view the site in another browser. I get This on the top left corner "Insert your controls here." Not sure what I might be doing wrong. Do I need use any rendering.

    ReplyDelete
    Replies
    1. Are you able to take a print screen of the browser window. You can email it through to me@ryanbailey.nz for me to look at.

      Delete
  5. Thanks a ton! Have you tried implementing any sitecore site following Helix principle. Also, is there a template for information architecture for building any sitecore web site

    ReplyDelete