Experience Editor Exposé – Rapid Item Entry

Content entry of multiple items in Experience Editor

experience-editor
Exposing Experience Editor

The Experience Editor is a Sitecore integrated tool that exposes fields on the current page for editing, WYSIWYG style.  In MVC views, if you take advantage of the HTML helpers provided by Sitecore to render fields or use Glass Mapper’s Editable helper, the fields from the current context item are magically editable in this Editor.

This blog series intends to reveal some common scenarios that are not natively built in and require a combination of configuration and perhaps some coding.

A common scenario that I’ve seen is the content editor’s desire to rapidly add one item after another in Experience Editor.  There is an “Insert Page” option in the XE ribbon, however, this is to create a item as a child of the existing item.

insert-new-page
Inserts a new child item

To do repeatedly enter sibling items in XE without any configuration, the user does the following:

  • create a new item in the content editor
  • go to the Publish->Experience Editor ribbon command
  • add content to new item
  • save
  • close XE
  • …repeat …

(NOTE:  The user could also create a child item with the “Insert page” option, followed by the “Move page” option.  This is clunky as well).

Here is an alternative.  Create a ‘window’ to the parent item on the existing page and then expose the “New Item” functionality in the Field editor buttons.

In the example below, we have a parent folder called “Articles” with either one- or two-column articles as children.  We’ve added an “Button Name” field to the folder to support a button name.

parent-child-article
Articles folder has Insert Options of “Article One Column” and “Article Two Column”

Let’s add an Edit Frame and expose the ability to insert a child article under the Articles folder while viewing a child article in Experience Editor.

In the main article’s MVC view and CORE database, do the following:

  1. Add a reference to the Sitecore.Context.Item.Parent (be sure to add in any null checks, etc)
    var ParentModel = SitecoreContext.Cast<Article_Folder>(Model.Item.Parent);
  2. Add a new Edit Frame Button folder and Insert WebEdit Button in the Core database at:  /sitecore/content/Applications/WebEdit/Edit Frame Buttons
    edit frame example.png
  3. Add an EditFrame inside the View.  This references the path of the Edit Frame Folder in the Core database. The Button_Name also becomes editable if needed.
var path="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/AddArticlePage"
using (BeginEditFrame(path))
 {
 <button>@Editable(ParentModel, x=>x.Button_Name)</button> 
 }

Result:

insert-item

After saving the current article, use this new button’s “insert item” functionality to add a sibling article.