Saturday, November 12, 2011

Creating a Gutter Icon for Proxies

One of the true joys of Sitecore is the ease of customization.  We use proxies fairly extensively on our site, and a colleague recently complained that the Content Editor did not give a clear indication of whether an item is a proxy, and what is its source.  This inspired me to see if I could add a gutter icon to identify proxies, similar to the gutter clones icon that ships with Sitecore 6.4.   (The "gutter" is the area to the left of the content tree with icons, such as "My Locked Items", that can be toggled on and off.)  Like the clones icon, I wanted one that would navigate to the source item when clicked.  This is a fairly straightforward task, but I did have to lean on ReSharper's decompiler to see how the Sitecore guys built the clones icon.

The first step is build a class that inherits from Sitecore.Shell.Applications.ContentEditor.Gutters.GutterRenderer.  Next, override the method GetIconDescriptor(Item item).  This method receives the content tree item, and it is up to the developer to either return null if no icon is to appear, or a GutterIconDescriptor to show an icon.

The GutterIconDescriptor has three properties:
  • Icon
  • Tooltip
  • Click, to show the javascript to run if the icon is clicked. 
The code is suprisingly short:
using System;
using Sitecore.Data;
using Sitecore.Data.Items;
using Sitecore.Shell.Applications.ContentEditor.Gutters;

namespace SitecorePlayground.Extensions
    public class ProxyGutterDisplay : GutterRenderer
        protected override GutterIconDescriptor GetIconDescriptor(Item item)
            if (item.RuntimeSettings.IsVirtual)
                var gid = new GutterIconDescriptor();
                gid.Icon = "Applications/32x32/documents.png";
                if (item.RuntimeSettings.IsExternal)
                    gid.Tooltip = String.Format("Proxy of item in {0} database.", item.RuntimeSettings.OwnerDatabase.Name);

                    gid.Tooltip = "Proxy item. Click to see source.";
                    gid.Click = GetLinkToSource(item);
                return gid;
            return null;

        private string GetLinkToSource(Item item)
            ID sourceId = item.InnerData.Definition.ID;
            string linkString = String.Format("item:load(id={0})", sourceId);
            return linkString;

A few remarks on the code:
Once the code is in place, all that is left is referencing it in the Core database content tree.  In Core, add an item of type /sitecore/templates/Sitecore Client/Content editor/Gutter Renderer to the location /sitecore/content/Applications/Content Editor/Gutters.  The only fields you need to set are "Header", the text to appear in the gutter context-menu toggle control, and "Type", which contains a reference to the class above, in standard "Full.Class.Name, Assembly" format, with no ".DLL" after the assembly. Save, and you're set.

Here are a few screen shots of the results:

It's as simple as that. Two years into coding with Sitecore, and it's still a treat how the Sitecore Client is built on top of the Sitecore CMS backend. Sweetly recursive.

Oh, props are due to this post for getting me started, to K. Adam White for the inspiration, and to ReSharper for making the digging into the Sitecore kernel fun and intuitive.

UPDATE:  This code, and an installation package, has been posted to Github:


  1. Excellent post Dan!

  2. While creating these icons I had problems with missed . dll library files, but I solve it fast using if you have the same problem just find the file you need and download it on your device.

  3. You can employ weight washing organization for productive administrations and speedy tidy up of the sought spot. click site