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);
                }

                else
                {
                    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:

• It's a nice feature of this functionality that you can set the tooltip dynamically.  This allows it to handle proxies to outside databases intelligently.
• I selected an icon that was similar, but not identical, to the one used for the clones gutter icon.
• The API calls for identifying proxies and their sources are from SDN, http://sdn.sitecore.net/Articles/Administration/Using%20Proxy%20Items%20in%205,-d-,3/Proxy%20Items%20in%20the%20API.aspx
• The syntax for the item:load call is adapted from the ClonedItems gutter renderer. I have not yet found where this syntax is documented on SDN, but John West talks about it here: http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2011/08/Load-or-Reload-an-Item-in-the-Sitecore-ASPNET-CMS.aspx

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: https://github.com/dsolovay/Sitecore-Proxy-Gutter-Icon