Sitecore Bootcamp for Developers: Part 5

Experience Editor

Welcome back to Sitecore Bootcamp for Developers! In this part, we’ll extend our custom Sitecore 8.x content module we built in part 4 to use the Experience Editor allowing inline content editing.
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.

Update your module to allow editing using the Experience Editor (Visual Studio)

1. Update the Item Template Model
   1. Add Guid ID property to the interface
      1. This is different from the TemplateId GUID in the SitecoreType decorator.
      2. This ID property lets Sitecore match content to the correct module on the page.
2. Update the Item View
   1. Change @Model.Field to @Html.Glass().Editable(a => a.Field, null, true)
      1. This will use GlassMapper to display an editing box while logged in and using the experience editor. It will render the field as text when not logged in.
3. Build and deploy the solution
   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

Editing content using the Experience Editor (Sitecore)

1. Log into Sitecore
   1. http://sitecorebootcamp.localhost/sitecore
2. Click Desktop -> Sitecore Start Menu -> Experience Editor
3. Click the down arrow at the right of the Sitecore navigation bar to unhide options
4. On the view tab -> Check Navigation bar
5. In the navigation bar -> Click the arrow to the right of home and choose Page1 -> Click Go.
   1. You can also browser directly to http://sitecorebootcamp.localhost/page1
   2. You can also use the sites navigation (if it exists)
   3. You can select Publish -> Experience Editor from the Content Editor for a page
6. On the home tab -> Mode -> Click Edit (if not selected)
7. Moving your mouse around the page highlights modules and editable regions
   1. The entire module
      1. Setup personalization
      2. Delete module
      3. Move module
      4. Edit content using Content Editor
   2. Each individual editable field
      1. Inline editing
8. Edit the title, subtitle and content
9. Be sure to click the save button in the Sitecore navigation bar
10. Click Home -> Mode -> Other -> Preview to view the site as a visitor would see it after publishing
11. Click Home -> Publish
    1. Smart Publish
    2. Check box to publish related items
       1. We are editing the page. The CB1 item is related. If this box is not check, the edits to CB1 would not be published.
    3. Click Publish
12. Open a different browser or a private tab and confirm your changes were published successfully.
    1. The experience editor will likely try to load on all pages after you have loaded it once until you log out or click close on the toolbar.

Unleash the Potential of Power Platform With a Center of Excellence

Business innovation often comes from within. Discover how to empower innovation from non-traditional developers with the Microsoft Power Platform.

Learn More

Adding modules to a page using the Experience Editor (Sitecore)

1. Update the placeholder settings
   1. Open the content editor
   2. Click /sitecore/Layout/Placeholder Settings/content
   3. Allowed Controls -> Edit
   4. Browse to Layout/Renderings/Content Blurb
   5. Click the right arrow between the columns to add it to the selected list
      1. This allows you to add the content blurb module to a page from within the ExEditor
   6. Click Ok to close the dialog
   7. Save
   8. Click Publish in the Sitecore navigation bar -> Globe Icon -> Okay
      1. This will publish the current item
2. Add module to page
   1. Return to /page1 in ExEditor mode
   2. Click Home -> New Component in the Sitecore navigation bar
      1. The page will display “Add here” buttons where new content can be added
   3. Click Add here button where you want to add the new module
   4. In the dialog, choose the type of content to add
      1. Only modules allowed in the placeholder will appear
      2. Click the box to open the properties dialog
         1. If you miss this step, you can get to properties from module region -> More -> Component Properties
   5. Click Datasource -> Browse
   6. Click Create New Content
      1. Name = CB2
      2. Parent = /sitecore/Content/Home/Page1
   7. Click Ok
   8. Edit content fields
   9. Click Save
   10. Click Home -> Publish
       1. Smart Publish
       2. Check box to publish related items
       3. Click Publish

Food for thought

1. Modules should be “aware” that they are in the Experience Editor – that is, they should gracefully handle error conditions (ie. missing data or datasources) without throwing errors. Modules could also provide instructions or additional information about their purpose right in the EE.
2. Enabling the experience editor for non-simple types (other than text) is more complex and requires “edit frames”.

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