Sitecore Bootcamp for Developers: Part 4

Building Your First Module

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Welcome back to Sitecore Bootcamp for Developers! In this part we’ll build our first custom Sitecore 8.x content module.
If you are just joining us, please go back and read the introduction where you’ll also find links to each other part of the bootcamp.

1. Log into Sitecore
   1. http://sitecorebootcamp.localhost/sitecore
      1. Default username:password is admin:b
2. Click Desktop -> Sitecore Start Menu –> Content Editor
3. Create “User Defined” folders to store your content (Sitecore)
   1. Right click on /sitecore/Layout/Layouts -> Insert -> Layout Folder
   2. Right click on /sitecore/Layout/Renderings -> Insert -> Rendering Folder
4. Create a Layout (Sitecore)
   

   In real projects, you will organize items in sub-folders. The structure will be dictated by the solution architect, client, or framework.

   1. Right click on /sitecore/Layout/Layouts/User Defined -> Insert -> Layout
   2. Create layout “Main Layout”
   3. Location = Layouts/User Defined
   4. File Location = /Website/Views
   5. Change the Path field to /Views/MainLayout.cshtml
   6. Click Save
5. Create a Page Template (Sitecore)
   1. Right click on /sitecore/Templates/User Defined -> Insert -> New Template
   2. Name = “Page”
   3. Base Template = “Templates/System/Templates/Standard template” (default)
   4. Location = Templates/User Defined
   5. On the builder tab
      1. Section = Meta
      2. Fields
         1. Title = Single-Line Text (default)
         2. Keywords = Single-Line Text (default)
         3. Description = Multi-Line Text
   6. Click Save

6. Icons help content editors easily see content type while looking at the content tree.     Choosing a custom icon is not required.

   Set the Page Template Icon (Sitecore)

   1. Click /sitecore/Templates/User Defined/Page
   2. Click Configure in the Sitecore navigation bar -> Icon -> More Icons
   3. Click the Icons tab
      1. Icons are sorted by categories in a drop down at the top of the dialog
   4. Find an icon that represents your template
      1. The icon will appear next to each instance of this template
      2. I used Applications/Document_Plain
   5. Click Ok on the Icon dialog
   6. Click Save
7. Set the Page Template Standard Values (Sitecore)
   1. Click /sitecore/Templates/User Defined/Page
   2. Click Options in the Sitecore navigation bar -> Standard Values
      1. Standard values apply to all instances of this template, but can be overwritten by an individual instance as needed.
      2. They are a good place to provide default values for fields, default layouts, modules (ie navigation, headers, footers)
   3. Click /sitecore/Templates/User Defined/Page/__Standard Values
   4. Click Presentation in the Sitecore navigation bar – >Details
   5. Click Edit on the Shared Layout tab Next to Default
   6. On the Layout tab, select Layouts/User Defined/Main Layout
      1. This will make sure all new pages that use this “Page” template all use the “MainLayout” by default.
   7. Click Ok on the Device Editor dialog
   8. Click Ok on the Layout Details dialog
   9. Click Save
8. Create an Item Template (Sitecore)
   1. Right click on /sitecore/Templates/User Defined -> Insert -> New Template
   2. Name = “Content Blurb”
   3. Base Template = “Templates/System/Templates/Standard template” (default)
   4. Location = Templates/User Defined
   5. On the builder tab
      1. Section = Content
      2. Fields
         1. Heading = Single-Line Text (default)
         2. Subtitle = Single-Line Text (default)
         3. Content = Rich Text
   6. Click Save
9. Set the Item Template Icon (Sitecore)
   1. Click /sitecore/Templates/User Defined/Content Blurb
   2. Click Configure in the Sitecore navigation bar -> Icon -> More Icons
   3. Click the Icons tab
      1. Icons are sorted by categories in a drop down at the top of the dialog
   4. Find an icon that represents your template
      1. The icon will appear next to each instance of this template
      2. I used Applications/text_align_justified
   5. Click Ok on the Icon dialog
   6. Click Save
10. Create a Rendering (Sitecore)
    1. Right click on /sitecore/Layout/Renderings/User Defined -> Insert -> Controller Rendering
       1. View renderings use Sitecore as the “Controller” and call a cshtml directly. This can be useful for simple modules.
       2. It is a good practice to use controller renderings instead of view renderings. It will let your code be more flexible in future with minimal impact to your code and templates.
    2. Create rendering “Content Blurb”
    3. Fields
       1. Controller = ContentBlurb
       2. Controller Action = ContentBlurb
       3. Datasource Template = Insert Link to /sitecore/Templates/User Defined/Content Blurb
          1. This creates the link between the template in Sitecore and your MVC Controller.
    4. Click Save
11. Create an Error View (Visual Studio)
    1. Right click on Views folder -> Add -> MVC 5 View Page (Razor)
    2. Name = Error
    3. Add html/razor (see attached)
12. Create a Page Model (Visual Studio)
    1. Right click on Models folder -> Add -> New Item
    2. Choose Visual C#/Code/Interface
    3. Name = IPage.cs
    4. Add the SitecoreType attribute decorator to the interface
       1. [SitecoreType(TemplateId = “{GUID}”, AutoMap = true)]
          1. This helps sitecore automatically populate properties
       2. Update the GUID from the Page Template
          1. Click /sitecore/Templates/User Defined/Page (sitecore)
          2. Click on the Content tab
          3. Click Quick Info to expand
          4. Click on the Item ID and copy to the clipboard
    5. Add string properties for the fields in the Sitecore template
    6. Remove any unnecessary using statements
13. Create a Layout View (Visual Studio)
    1. Right click on Views folder -> Add -> MVC 5 View Page (Razor)
    2. Name = MainLayout
    3. Add html/razor (see attached)

14. This guide uses interfaces for models. You may also see concrete classes used for models.

    Create an Item Template Model (Visual Studio)

    1. Right click on Models folder -> Add -> New Item
    2. Choose Visual C#/Code/Interface
    3. Name = IContentBlurb.cs
    4. Add the SitecoreType attribute decorator to the interface
       1. [SitecoreType(TemplateId = “{GUID}”, AutoMap = true)]
       2. Update the GUID from the Item Template
          1. Click /sitecore/Templates/User Defined/Content Blurb (Sitecore)
          2. Click on the Content tab
          3. Click Quick Info to expand
          4. Click on the Item ID and copy to the clipboard
    5. Add string properties for the fields in the Sitecore template
    6. Remove any unnecessary using statements
15. Create an Item View (Visual Studio)
    1. Right click on Views folder -> Add -> New Folder
    2. Name = ContentBlurb
    3. Right click on Views/ContentBlurb folder -> Add -> MVC 5 View Page (Razor)
    4. Name = ContentBlurb.cshtml
    5. Add html/razor (see attached)
16. Create an Item Controller (Visual Studio)
    1. Right click on Controllers folder -> Add -> Controller
    2. Empty MVC 5 Controller
    3. Name = ContentBlurbController
    4. Extend GlassController instead of Controller
    5. Add ContentBlurb action method (see attached)
17. Build and deploy the solution (Visual Studio)
    1. Build -> Build SitecoreBootcamp (or Build Solution)
    2. Build -> Publish SitecoreBootcamp
    3. Refresh home page in browser
       1. This allows Sitecore to rebuild its caches
18. Create a new Page (Sitecore)
    1. Right click on /sitecore/Content/Home -> Insert -> Insert from template
    2. Select Templates/User Defined/Page
    3. Item Name = page1 (no spaces)
    4. Set title, keywords, description
    5. Click Save
19. Create a new Content Blurb (Sitecore)
    1. Right click on /sitecore/Content/Home/page1 -> Insert -> Insert from template
    2. Select Templates/User Defined/Content Blurb
    3. Item Name = CB1
    4. Set heading, subtitle, content
    5. Click Save
20. Add Content Blurb to a Page (Sitecore)
    1. Click on /sitecore/Content/Home/Page1
    2. Click Presentation -> Details in the Sitecore navigation bar
    3. Click Final Layout -> Default -> Edit in the Layout Details dialog
    4. On the Controls tab -> Click Add
    5. Select Renderings/User Defined/Content Blurb
    6. Placeholder = content
       1. This is defined in the MainLayout.cshtml
    7. Click Select to close the rendering dialog

    8. Datasources allow you to reuse the same content in multiple places on the site.

       Click the Content Blurb rendering and click Edit

    9. On the Control Properties dialog -> Data Source -> Browse and choose /sitecore/Content/Home/Page1/CB1
       1. Notice you can only select items of type “Content Blurb” because Sitecore knows the item type for this control.
    10. Click Ok on each dialog to close
    11. Click Save
21. Publish Site (Sitecore)
    1. Click Publish in the Sitecore navigation bar -> Publish dropdown -> Publish Site
    2. Select Republish
       1. This will publish EVERYTHING
          1. A good idea since this is the first publish
       2. It ensures that all of your templates, layouts, renderings, and items get published.
          1. Subsequent edits to items can be published using Item or Smart Publish
    3. Click select all for languages (if you have multiple languages)
    4. Click Publish
    5. Confirm republish
22. Load Page (Browser)
    1. http://sitecorebootcamp.localhost/page1
       1. The url is case insensitive
    2. Content blurb item appears on the page
    3. View source to verify keywords and description are present
23. Load Item (Browser)
    1. http://sitecorebootcamp.localhost/page1/cb1
       1. Notice that you get the Sitecore error page
       2. It says it cannot find the requested layout with GUID {000-00-00-00-000}
       3. The CB1 content item does not have a layout defined in its presentation details like the page item does. This means it can go on a page, but isn’t a page itself.

Be sure to follow me through the entire month of November 2017 and follow along with each part as they become available. Thanks for reading, and be sure to leave me comments or questions, I would love to chat with you about Sitecore.
Created by: Eric Sanner, Brandon Bruno, Alan Tibbs