Share

LinkedIn

Sitecore 8 Development: Where to Start?

Sitecore is an amazing experience platform with many knowledgeable fans and a deep support base.

Often overlooked, however, is where you dip your toe in. That is, “how do I get started with development?” Or, specifically, “how do I get a simple MVC page or asp control to actually display as a website?” When I completed Sitecore certification several years ago I believed that most controls would be handled in Sitecore. But, ten real-life projects later, I can confidently say that isn’t the case.

This guide will show how to set up your local development environment and prepare for your first Sitecore control.

Step 1 – Gather the Pieces

You will need a Sitecore installation file, a Sitecore license file, SQL server (“express” is okay), IIS and Visual Studio.

You may guess that the very first step is getting Sitecore installed on your local machine. You need to ensure that SQL and IIS are installed and you have credentials to an SQL account. Before you begin the installation you will need a Sitecore license file. That file should be available through your Sitecore sales representative. Once ready you can find the Sitecore installation file here https://dev.sitecore.net/Downloads.

IStep 2 – Lay the Foundation
Start the Sitecore installation, name your website and launch Sitecore when installation is complete. You should now see the default Sitecore homepage. (Don’t see the correct page? Refer to this document about installing Sitecore 8).

Now it’s time to create the project. Open up Visual Studio and create a new Web Application. For this demo, we’re creating an MVC 4 site (File > New Project > MVC 4 > Empty). Double-check that your solution is created in the directory you want. Now that you have an “empty” project, remove the files and folders that would conflict with what has been installed with Sitecore.

Remove everything but the folders for:

  • Controllers
  • Models
  • Views



In addition, remove everything from your references folder. (You will pull in references from the Sitecore bin directory to avoid DLL conflicts.)

Once you have cleared your project, open Windows Explorer to C:\inetpub\wwwroot\[Sitecore Site]\Website. This website folder is the heart of the Sitecore web application. Pull in the necessary references and files, specifically:

  • Web.config
  • App_config folder (if you need connection strings or custom configs)

Then add your references from your website bin directory. Your project will include a lot in the app_config and web.config items, most of which you don’t need now. But it doesn’t hurt to have these available since you will most likely be updating or adding values later.


 

Step 3 – Set Up Walls and a Roof
You are almost ready to create a component in Sitecore. First, let’s look at how Sitecore builds its pages from a high level.

A page in Sitecore is built using Layouts, Renderings, and Data Templates. Layouts are comparable to master pages or MVC layouts and provide the main structure of the entire page. Renderings go inside placeholders specified in the layout and are HTML- and content-driven. Data Templates are the equivalent to models and store the actual content. Both Layouts and Renderings will have Items based off of the Data Templates as models.

If you look at the Presentation Details in the homepage in the Sitecore content tree, you’ll see a Sample Layout and sub-layouts, as well as your rendering. The initial sample page is built in ASP which won’t work for your purpose, but you can follow a similar pattern as seen there.

Create a Simple Layout
In your project, you will need a view. This will serve as your main layout.

I borrowed code from the original sample layouts, and a main layout looks like this:

1.  @using Sitecore.Mvc
2.  <html
3.  <head
4.      <title>@Html.Sitecore().CurrentItem.DisplayName</title
5.      <link href="/default.css" rel="stylesheet" /> 
6.  </head
7.   
8.  <body
9.   
10.     <div id="MainPanel"
11.         <div id="CenterColumn"
12.             <div id="InnerCenter"
13.                 <div id="Header"
14.                     <img alt="Sitecore Logo" src="/sitecore/shell/themes/standard/Images/HomeButton2.png?w=42&h=42&as=1" style="float:left"/> 
15.                     <h2 style="padding-top: 10px">Main Layout</h2
16.                 </div
17.                 <div id="Content"
18.                     @Html.Sitecore().Placeholder("main") 
19.                 </div
20.                 <div id="Footer"
21.                     <hr class="divider"
22.                     © 2014 Sitecore 
23.                 </div
24.             </div
25.         </div
26.     </div
27. </body
28. </html>

Build and publish your code to the Website folder. (Set up a file publish profile to C:\inetpub\wwwroot\[Your Site\website.)

Now create a Sitecore item to use your code. Go to the Content Editor under [Your Site Name]/sitecore. In the tree, expand “Layouts” and insert a new layout. This will be your Main Layout established earlier. Walk through the wizard understanding that you will be changing which file it points to. Once created, update the path to point to your cshtml file.


 
You are now ready to assign the main layout to your home item. To do this, select the home item, go to the presentation tab and select Details. When the window opens, select Sample Layout and change it to your new Main Layout. Also remove the renderings and add a placeholder called “main” (to correlate with the placeholder in the markup). The result should look like this:


 
Create a Component
The biggest differences between a layout and your component is that you are using a controller, and you will eventually have content-managed fields. Create a controller and a view like last time. Nothing fancy. Your view should  look like this:

1.  @using Sitecore.Mvc 
2.  <div
3.      <h2>Hello World</h2
4.      This content is coming from the rendering 
5.  </div>

Back in Sitecore, the next step is to add a Controller Rendering to the sitecore/layout/renderings folder. Unlike the Layout, you don’t need to enter a pathname into any field. Instead, enter a controller and action for that rendering to execute. If your action is “index” you can leave it empty, and you don’t have to include the class name for the controller. Your rendering should look like this:


 

Now return to your page in Experience Editor and add your component to the placeholder.


  

Driving the Component with Data Templates
You have successfully created a static page and static components, but that’s not using the best features of Sitecore. The next step is to make your content dynamic. To do this you need three things:

  1. Create a data template
  2. Update markup to use fields
  3. Create data item in the content tree and tie it to the rendering

In the Content Editor create a new item template under Templates. Add a couple of fields and save it.

Now update the markup. (There are better ways to handle accessing these fields, but for a simple and straight-forward approach, this works.)

1.  @using Sitecore.Mvc 
2.  <div
3.      <h2>@Html.Sitecore().Field("Title")</h2
4.      @Html.Sitecore().Field("Body") 
5.  </div>


Then create your data. You can add a folder in the content tree to hold your data, then right click to Insert from Template. Then add the template and fill out the information.



 
Finally, associate your new data item to your rendering. Do this from either the Experience Editor or the Content Editor by selecting the rendering and editing the properties on it.


 
With these pieces in place, save your page and see your content pull from Sitecore. From the Experience Editor you are also able to edit the fields from your template, making your data truly dynamic.

A Final Touch
To polish the rendering a bit, go back to the rendering item in the Sitecore layouts folder. Sitecore makes some intelligent suggestions if you give a rendering enough information. Specifically, if you tell a rendering what template to expect, and where that template is expected to go, the Experience Editor will give you the option of creating content on-the-fly.





 

Once created, you can edit the fields directly from Experience Editor by clicking on the [No Text In Field] label.



 

Step 4 – Tools
One benefit from working with a platform as large and extensible as Sitecore is you can use tools and applications to speed development. Here is a quick list of some common tools used in most projects:

  • Slow Cheetah
    Used for configuration transforms, allows you to have separate config values for each of your build configurations.
  • TDS
    Primarily used for saving a Sitecore tree into a version-able list. Allows you to share the templates layouts and content of your Sitecore environment with others without running into conflicts.

    Can take your Sitecore items and generate C# models.

  • Custom Item Generator
    Similar to TDS in its model generation, Custom Item Generator is a tool that creates C# objects from the templates you have created.

  • Coveo for Sitecore
    A search provider with a free edition that allows you to use the powerful Coveo search engine.

Conclusion
As you delve into development you will begin to see the beauty of the Sitecore platform. With the tools to create a basic Sitecore site you can now start to see how well Sitecore will handle any business requirement and web application that may come your way.

Sitecore development, Sitecore custom code

Comments

Add a Comment

*
*

Please confirm you are human by typing the text you see in this image:

Sandeep said: 7/29/2016 at 6:08 AM

It's great post I'd ever seen on sitecore. Concise, Clear, to the point

Jon said: 9/8/2016 at 6:31 AM

couldn't get any of this to work, keep getting build errors due to missing references

Amit said: 2/17/2017 at 4:58 AM

Brilliant post