Open Sitecore Content Editor from the Page Editor

The Sitecore Page Editor is the WYSIWYG (not the Drupal “WYSIWYG”, but true, realtime WYSIWYG for real) version of the Sitecore Content Editor. So why would you open the Content Editor from the Page Editor?

Image you have a set of data in a tree structure that is not visual, but still required. This could be a metadata archive, a link archive, or it could be settings or search and index options. All of these data needs to be editable. And if you have made a “Page Edit Only” website you need to give access to these data from the page editor as well.

This is a case from a Google Maps project. In this project I have a set of overlays (the markers, polygons and other stuff that is on top of the map). And I need to give access to these data from the Page Editor:

Open Content Editor from the Web Editor

Open Content Editor from the Web Editor

Notice that the root of the tree is not the root of the web site, but a root that I have chosen myself.

The code to do this trick is even easier than opening the Media Library from the Page Editor.

To open the Content Editor you first need to add a button to the Page Editor. Go to the CORE database and find the Web Edit application at /sitecore/content/Applications/WebEdit.

The Preview and the Web Edit has their own individual toolbars, at /sitecore/content/Applications/WebEdit/Ribbons/Preview and /sitecore/content/Applications/WebEdit/Ribbons/WebEdit, so if you like the button to be visible in either mode you add the button twice.

  • Add a new Strip template below the toolbars to create a new tab.
  • Add a new Chunk template below the Strip template to create a new section on the strip.
  • Add a new Large Button template below the Chunk template to create a new button on the chunk.
  • Find a suitable icon and in the “click” field, write the name of the command to execute. In this case it’s “pt_googlemaps:OpenOverlays“ because It’s an overlays folder I open.
Web Edit Add Button

Web Edit Add Button

Now on to the code. First you need to couple the pt_googlemaps:OpenOverlays to the underlying code. This is done by adding a new .config file below /app_config/include, and add the following contents:

<configuration xmlns:patch="" xmlns:x="">
      <command name="pt_googlemaps:OpenOverlays" type="MyCode.OpenOverlays,MyDll"/>

The code is simple. All you need is to provide a path to the Root Item of the content editor tree. In this case I’m using the function “OverlaysRoot” to find the item which is my root item.

using Sitecore;
using Sitecore.Text;
using Sitecore.Web.UI.Sheer;
using Sitecore.Data;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.Shell.Framework.Commands;

namespace MyCode
  public class OpenOverlays : Command
    public override void Execute([NotNull] CommandContext context)
      var url = new UrlString("/sitecore/shell/Applications/Content Manager/default.aspx");
      url.Add("ro", OverlaysRoot.ToString());
      SheerResponse.Eval("'" + url + "', 'ContentEditor', 'location=0,resizable=1')");

    private ID OverlaysRoot
        Item overlaysRoot = Client.ContentDatabase.GetItem("/sitecore/system/Modules/PT_GoogleMaps/Overlays");
        Assert.IsNotNull(overlaysRoot, "Could not find overlays at /sitecore/system/Modules/PT_GoogleMaps/Overlays");
        return overlaysRoot.ID;

You should change the “OverlaysRoot” function to return the root of your choice.

The cool part is that yoiu can provide context-sensible access to all of your non-visual data by adding more than one editor by simply create an array of buttons, say “Edit Metadata”, “Setup Website” and so on. This could really boost the usability of your solution.


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in c#, Sitecore 6 and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s