An Example of using Edit Frames in Nicam

For those of you that work with, or used to work with, 5.3 Green Dots Web Edit functionality, you might really appreciate the ease with which you can create contextual editing menus.  The 6.0 Page Editor (with all its significant usability features and improvements) might have left you questioning your ability to implement the same contextual functionality.  Enter Edit Frames as of 6.1, a great new feature that should have you dreaming up some incredibly focused Page Editor-based contextual editing functionality.
John West, as always, has a great description of this functionality here.
For my discussion today, I wanted to show a couple of quick examples of where this could be used.  As you know, Sitecore Data Templates promote the encapsulation of complex content types.  Some fields in these Data Templates are presentation-driven (Short Description, Image), while others are meta-driven (Rating, Keywords, Category).  The Content Editor interface shows all fields on both sides of this fence in a comprehensive, section-organized form view.  In Page Editor, we get the very handy inline frame editing of all presented fields.  But what about those meta-fields behind the scenes?  Page Editor presents the “Blue Boxes” to split the screen and get to those fields behind the presented page.

Clicking on Edit the related item splits the screen and allows us to navigate the sections of fields that make up the News Article Data Template:

While this is intuitive and simple, we’re always striving to make this Page Editor experience as streamlined as possible.  Instead of splitting the screen and having to find a field (within what could be a very complex Data Template), it would certainly be nice to define the field(s) that the editor would be most interested in getting to, and to simplify and focus the editing interface even more.
Edit Frames allow for just that.  Let’s take this same example.  We’re editing a News Article (Nicam Camera K200D) that has fields for Title, Short Description, Image, etc.  Via the Online Marketing Suite, we article authors also want to tag this piece with the appropriate keywords that match up to our profile keys.  Let’s build an Edit Frame around the article’s title that allows us to see the checklist of Keywords with which to tag this article.
First, we need to define the Buttons that will be part of our Edit Frame contextual menu.  Sitecore provides a couple of handy default buttons (Insert and Edit).  For today, we’ll simply use the default behavior of Edit Field, but for you developers, you can already imagine that any command functionality can be invoked here.  The Buttons themselves are defined in the Core database (very much like the commands available to the Rich Text Editor).

Switching to the Core database and navigating to /sitecore/content/Applications/WebEdit/Edit Frame Buttons will show us all Edit Frame toolbars configured for the site.

The system is installed with the Default toolbar in place.  If an Edit Frame does not specifically call out a Buttons property, the Default is used.  Let’s copy the Default item, paste it under Edit Frame Buttons, and rename it Keywords.

If you select the newly renamed Keywords item, you’ll see that the Edit Frame toolbar has fields for a Title and Tooltip.  Expand the Keywords item to reveal the default Buttons available to it.  We’re using the Edit Button (you can delete this Insert button), and selecting it shows the fields available to the Field Editor Button template that it is based on.

The Fields field allows a pipe-separated list of fields that will become readily available to the Page Editor.  For our example, we’re using only one:

Now, with the toolbar in place and configured, we simply need to add the Edit Frame to a presentation control.  This Edit Frame can be added, of course, to a .NET or XSLT control.  Since the news article already has a NewsItem xslt to present its fields, let’s add the frame there:

<xsl:template match="*" mode="main">
<sc:editFrame Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Keywords">
<h1>
<sc:text field="Title" select="." />
</h1>
</sc:editFrame>

Notice the Buttons property calls out the path in the Core database to the Keywords toolbar we set up.  The <sc:editFrame> itself will present hover-over region including any HTML we wrap it with:





Clicking on the new Keywords (Default Title of the Keywords toolbar itself) drop-down shows us any buttons within the Toolbar.





And now we can easily edit the Keywords checklist field:





That’s all there is to it.  This article simply covered the mechanics…now we can think through the many creative places where this technique makes sense to make the Page Editor even more powerful.