Sitecore Best Practice #7 - What's the big picture?

23 June 2011
Adam Najmanowicz
Frink_Cognifide_2016_HeaderImages_0117
This Sitecore best practice advises the CMS developers to show all the relevant information on page while the author is still in the editing mode.

One of the benefits of working with multiple CMS vendors is that you get to observe some of the pitfalls but more important, what each of the vendors has done right for the benefit of the authors. In this case, I'm borrowing one of the SharePoint ideas and refactoring it for you as a best practice for the Sitecore Content Management System.

SharePoint's Edit Mode Panel is a simple invention that makes it much easier for editors to never leave the WYSIWYG editor and do all of their content entries in one place without having to resort to pop-ups or having to use the drop down page property list. The edit panel on SharePoint for Cognifide is displayed below:

SharePoint Edit Mode Panel
As the page is in Edit mode, the meta properties that you would otherwise have to set in Content Editor are readily available. What's more - only the properties relevant to the page type surface (since it's part of the page template) thus improving system usability by removing the clutter of inherited standard properties.
Similarly, in our best practice we're introducing a rendering that's only visible when a page is being edited.

What is Sitecore best practice 7 about?

While author uses Page Edit mode they should be able to edit template fields of the current page even if they are not displayed directly on the page.

Why should I follow it?

We should not force authors to click through the site in order to find the places where some page properties can be edited. All template fields of the page should be editable within the page.

Demo scenario

Author starts page editor and creates a new event page. Despite the fact that some of the fields are not used on the event page directly (e.g. 'Start Date' or 'End Date'), author should be able to edit them on the event page.

Sitecore Edit Mode Panel

How do I implement it?

The only thing we need to do is to create ascx control that will contain FieldRenderers for the properties that we want to edit and that will be hidden if it's not in page edit mode:

<table class="event-details>
    <tr>
        <td colspan="2" class="event-details-header>Event details</td>

    </tr>
    <tr>
        <td width="150>Start Date:</td>
        <td><sc:FieldRenderer runat="server" FieldName="StartDate" /></td>
    </tr>

    <tr>
        <td>End Date:</td>
        <td><sc:FieldRenderer runat="server" FieldName="EndDate" /></td>
    </tr>
    <tr>

        <td>Summary text:</td>
        <td><sc:FieldRenderer runat="server" FieldName="SummaryText" /></td>
    </tr>
    <tr>
        <td>Short summary:</td>

        <td><sc:FieldRenderer runat="server" FieldName="ShortSummary" /></td>
    </tr>
</table>

And consequently, in the code behind the rendering:

protected override void OnInit(EventArgs e)
{
    if (!Sitecore.Context.PageMode.IsPageEditorEditing)
    {
        Visible = false;
        return;
    }
    base.OnInit(e);
}

Then, we create a sublayout for this control and put it on the chosen template. After some css styling we can get something similar to what we see on the screenshot above.

Thanks to Marek Musielak for his help with the Sitecore Best Practice #7.