Sitecore sc:editframe empty DIV workaround

The sitecore page editor has come a long way since it was first introduced. It is a very useful tool for content editors to edit pages, as opposed to the content editor, which can seem daunting to a business user. Page editor comes with a lot of options for configurations – one of these options is to have the user be able to enter a new item into sublayout, as a child of the existing item. This is acheived by adding an sc:ediframe tag in the sublayout:

 <sc:EditFrameID="editLinks"runat="server"Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/MySitecoreProject">

This works great, when you already have items in there, so the <div> that contains the content has enough of an area for the mouseover to work.

editframe1 — When the DIV has content, it has mouseover area that can be used.

However, if you don’t have any items in there, the <div> is collapsed, so there is no area to mouseover on, and hence the context menu does not appear.

editframe2 — No <div> outline, so the user doesn’t know where to mouseover to see the context menu.

The very simple workaround for this is to have an instructions text, and/or an image menu icon, which hovered on opens up the sitecore page edit menu.

editframe3 — Simple image, and text, conditionally displayed

On the resulting .ascx sublayout, the code would be:


<sc:EditFrame ID="editLinks" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/MyProjectName">

<asp:Panel ID="pnlInstructions" runat="server" Visible="false"><img src="/images/menu.gif" />Insert new items here by clicking on the menu button on the left.</asp:Panel>

In the code behind, you would then only display the content if in editing mode:


if (Sitecore.Context.PageMode.IsPageEditor || Sitecore.Context.PageMode.IsPageEditorEditing)
{
     pnlInstructions.Visible = true;
}

Subsequently, you can also make the instructions text come directly from the sitecore item – make a field called “Instruction”, and insert an sc:text tag into the panel:


<sc:EditFrame ID="editLinks" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/MyProjectName"></span>

<asp:Panel ID="pnlInstructions" runat="server" Visible="false"><img src="/images/menu.gif" /><sc:Text ID="scInstruction" runat="server" Field="Instruction" /></asp:Panel>

An edited version of this post also appears on 1000 lines of code