Effectively Using Page Mode in Page Editor

In the Sitecore Context, you have access to determine if the user is in normal mode or edit mode.  Knowing this provides you as the developer with an important piece of information.  There are certain things we should do with this knowledge and others that we shouldn’t.  Using this property (Sitecore.Context.PageMode) allows you to show additional content fields or messages to the user even though these items are not present on the published site.

My Experience

When I first learned about this, I overused it.  There are really two uses for page mode, and I have a fairly strong opinion about how to use it on your site.  The first is to show additional text based fields for the user to edit right on the page.  The other is to show messages to the user such as a control which has no data source or needs data.

Showing Additional Content Fields

This is simple to do, but I don’t recommend it.  You just add a field renderer to the page and make it invisible by default.  In the page load method, you make it visible if the page is in edit mode.  Just like that, you have shown content to the user that is not on the site.  That is the problem.  Page Editor is all about editing content in the context of a page, and you just showed content that isn’t supposed to be there.  You are showing content out of context in the in context editor.  Even if you label it or put it in a special place, it is still confusing.  The strength of page editor is that it shows content just like the site, so don’t violate that.

Showing Messages to the User

This is my favorite place to use page mode.  In a site that I built there as a control that takes a data source and shows the child items in a list.  This works great unless the user selects an item that has no children.  In this case, you can use page mode to show a message (in a special CSS class of course) to let the user know that there is a problem.  The error message shows in the place of the page where the control is rendered, and allows the user to easily access the floating toolbar.  Once the floating toolbar is open, they can select a new data source or remove the rendering.

 page mode example

Wrapping Up

We looked at two ways to use page mode.  One use made the interface less intuitive to the author while the other use made the interface better.  Since the goal is to make content management easier, we must effectively use page mode.

  • Hi Chris,  I was looking through your Launch Sitecore Site and was trying to implement the "item is not tagged" page editor alert. It does not seem to be working . I have the Tag template, tag sublayout, page editor warnings template and in Modules and css. I must be missing something. I really need to implement this feature. Any chance for some assistance?  Thank you Doug Clelland |  Web Programmer Sitecore .NET Certified Developer