With all of the hype about the release of the Sitecore Online Marketing Suite (OMS) at the end of this June 2009, it’s important to remember that OMS depends on Sitecore CMS 6.1. This CMS release includes several useful new features:

• Edit frames (described in this post).
• The field editor (described in this post).
• The rules engine (for features such as conditional rendering).
• Parameters templates (for defining user interfaces to apply rendering parameters in layout details).
• The Remember Me checkbox on the CMS login screen.
• A reporting UI framework with some canned reports.
• A variety of minor enhancements.

This post describes two of these features that work well together: edit frames and the field editor.

Sitecore 6.0 replaced WebEdit with the Page Editor. The Page Editor replaced content markers (green circles activating the Content Editor and context menus) with inline editing features that allow the user to edit directly in the page. It would not be possible for Sitecore to provide inline editing user interface components for every type of field. How would Sitecore know what user interface would make sense to change the value of a checkbox while inline editing on your Web site? What about your custom field types? So in the 6.0 Page Editor, you had to show the fields to edit certain types of data, or develop controls to let the user update those fields.

Sitecore 6.1 introduces edit frames, which let you add menus of UI commands when inline editing in the Page Editor. 6.1 also introduces the field editor, which lets you edit fields using controls similar to those used in the Content Editor, but with a much more lightweight UI. You can use edit frames and the field editor to provide simplified editing for data template field types that don’t support inline editing.

An edit frame creates something like an HTML <div> element around the enclosed components when the user is editing inline in the Page Editor. For example, I added a checkbox field named Boolean to the sample item data template and the following to the sample XSL rendering (of course you can do the same in .NET):

<br />
<br />
<sc:editFrame>
  The condition is <xsl:value-of select="sc:fld('boolean',.)='1'" />
</sc:editFrame>

The result:

If the user hovers over anything in this <div>, the browser indicates the content enclosed in the <div>, and adds a control above the <div>:

If the user clicks the arrow in the control, the browser displays an edit frame menu, allowing the user to choose from Sitecore UI commands configured by an administrator:

Sitecore provides two default edit frame menu commands that you can use, and you can write your own. The Insert New edit frame menu command activates a user interface that allows the user to insert an item using the insert options defined for context item:

If the user creates an item, the Page Editor refreshes to that item:

The Edit Item edit frame menu command activates the field editor, and you can specify which fields to include. I specified my field named Boolean:

Just like after closing the Rich Text Editor, I have to save after changing any field in the field editor. Then:

The edit frame can contain any amount of markup, including inline editing controls for any number of fields, plus whatever other markup you enclose within the <sc:editFrame> element. You can have multiple edit frames on a page, each with different edit frame menu commands. You can implement your own edit frame menu commands, and of course use security to control access to edit frame commands.

I was surprised at how easy it was to develop an edit frame menu command to list all fields in the item that don’t provide inline editing controls, excluding fields defined in the standard template.

Sitecore will release this example as shared source when it releases Sitecore CMS 6.1. At that time, the Client Configuration Cookbook will describe edit frames and the field editor in more detail than this post.

Update 30.June.2009: Sitecore today published the updated Client Configuration Cookbook describing edit frames and the field editor.