Tuesday, June 2, 2015

Tutorial: Creating a Sitecore 8 Website Part 5 - Layouts and Sublayouts With Templates

Sitecore Layout

A layout is basically a master page for Sitecore, it is required for Sitecore items to render in the browser and has placeholders for sublayouts to render as well. To define a layout, load up Sitecore administration and then the content editor. In the content tree expand the Layout item and right click Layouts and click Insert > Layout. Give the layout a name of "MainLayout" and click Next, then click Next again twice as the default locations are okay. Now to connect this layout with the file you created in the visual studio project, change the Path to "/Layouts/MainLayout.aspx".

Select the ContentPage template's standard values from the content tree and then select Details (under presentation) off of the top menu. Now on the layout tab (after clicking edit under default) select the MainLayout created in the previous step. By setting this value, by default (because of standard values) any ContentPage item in Sitecore will use the MainLayout layout.

Do the same for the Destination template's standard values file.

Sitecore Sublayouts

Sitecore sublayouts can be thought of as widgets (or web parts in SharePoint), they distinct items (with code behind) that can be added to Sitecore layout. A Sitecore item can only have one Layout (although it can be different based on desktop, mobile or print), but can have many sublayouts - even multiple copies of the same one.

To define a sublayout, load up Sitecore administration and then the content editor. In the content tree expand the Layout item and right click Sublayouts and click Insert > Subayout Folder and name it "TravelSite". Right click the newly created folder and click Insert > Subayout, give the sublayout a name of "MainContent" and click Next, for the location select the folder "TravelSite", click next.

Click the create value, because we don't need to create the ascx files. Now to connect this sublayout with the file you created in the visual studio project, change the Ascx file to "/Sublayouts/MainContent.ascx".

Do the same for the Navigation and DestinationContent sublayouts, and your content tree  should look like the following:

Sitecore Placeholder Settings

In the main layout aspx file in visual studio, 2 Sitecore placeholders were referenced. We now need to reference these in Sitecore to allow them to be used. In the content tree expand the Layout item and right click Placeholder Settings and click Insert > Placeholder Settings Folder and name it "TravelSite". Right click the newly created folder and click Insert > Placeholder, give the sublayout a name of "Main". 

The placeholder has a setting called Allowed Controls, this allows you to manually define which controls can be added to this placeholder. If left blank, there are no restrictions however if you add selected Sublayouts, only those ones can be added. Click edit and select the MainContent and DestinationContent sublayouts.

Create another placeholder called TopNavigation and set it's allowed controls to allow the Navigation sublayout. Your content tree should look like the following:

Adding sublayouts to a template in Sitecore

Now that we have sublayouts and placeholder settings defined, we could add the required sublayouts to the content items created earlier in this tutorial. However instead of doing it manually multiple times, like anything else the sublayouts can be defined at the template level.

Select the ContentPage template's standard values from the content tree and then select Details (under presentation) off of the top menu. On the Controls tab (after clicking edit under default), click Add, then add the Navigation sublayout to the TopNavigation placeholder.

Do the same for the MainContent sublayout, but add this one to the Main placeholder.

The added controls should now look like the following:

For the Destination template's standard values file, add the DestinationContent control to the Main placeholder and the Navigation control to the TopNavigation placeholder. It should now look like the following:

Publishing the Sitecore site

Now that the items have been created, they have a layout along with multiple sublayouts the Sitecore site can be published (please also ensure the visual studio solution has also been published). From the top menu select Publish > Publish and Publish Site. 

As this is out first publish we will select "Republish everything" to ensure nothing it missed. Normally a smart publish would suffice as Sitecore picks up the changed items well. Click the publish button to publish the site (this may take several minutes).

Once complete your site should load in the browser, for this tutorial the URL for my Sitecore site is "http://Sitecore/" and this URL shows:

Notice that the navigation is showing due to the Navigation sublayout, the content is showing due to the MainContent sublayout and the page title (and browser title) is set due to the MainLayout. The about page (available at "http://Sitecore/About") appears as follows:

Finally a destination page such as Auckland (available at "http://sitecore/Destinations/Auckland") appears as follows:

A zip file containing a Sitecore package of the items, templates, placeholders, layouts and sublayouts, can be downloaded here. To install please see Using the package designer to sync Sitecore content between environments.

Final notes

In this tutorial series we covered the absolute basics for getting a simple Sitecore web site up and running. Once you have achieved a base site like this, you can start diving into the much more advanced features which set Sitecore apart from other content management systems on the market. 

4 comments:

  1. After following your process, When trying to preview the site, All I see is "Insert your controls here"

    ReplyDelete
    Replies
    1. That is likely because you are logged into the CMS in the same browser. If you were to publish the site and then load it in another web browser (or incognito mode in Chrome) it should appear correctly.

      Delete
  2. Thank you Ryan. One last question. Where Can I pick this value in my instance.
    var mainContentItem = current.GetItem(new ID("{0DE95AE4-41AB-4D01-9EB0-67441B7C2450}")); // Uses GUID of main Content item

    ReplyDelete
    Replies
    1. This is the item ID of the Content item. The code is getting all items below it to build the navigation. Please see http://file.ryanbailey.co.nz/blog/sitecore-item-id-example.png for an example of this.

      Delete