Thursday 18 October 2012

Sitecore Gutter Rendering to Show Language Versions

The current project I'm working on is for a large multi-national company that are using the Sitecore multi-language capabilities to deliver their site in more than 17 regions/languages.

One of the difficulties the content editors have had is identifying from the tree if the item has a version in their regions language or not.  To help with this I suggested a new gutter rendering that would display the flag of the currently selected language for each item that had a version in that language. It turned out to be a very simple process.

To create a new gutter rendering you start by creating a new class that inherits from Sitecore.Shell.Applications.ContentEditor.Gutters.GutterRenderer. (Hint: Sitecore Rocks can help out here!)

Then override the GutterIconDescriptor method to create your own rendering. Just create a new GutterIconDescriptor object and populate the Icon and Tooltip properties. For our purposes I wanted to render the current language flag if the item has a version in that language. So we test for a version in the current language:

 if (item.Versions.Count > 0)  

If we have a version, create the GutterIconDescriptor object and get the flag icon, we can get this from the item.Language.GetIcon(item.Database); method.

So here is the final code listing for the renderer:

 namespace RichardSeal.SitecoreBlog.Exstensions  
 {  
     using System;  
     using Sitecore.Data.Items;  
     using Sitecore.Shell.Applications.ContentEditor.Gutters;  
     public class MyLanguageVersion : GutterRenderer  
     {  
         protected override GutterIconDescriptor GetIconDescriptor(Item item)  
         {  
             if (item.Versions.Count > 0)  
             {  
                 var descriptor = new GutterIconDescriptor  
                              {  
                                  Icon = item.Language.GetIcon(item.Database),  
                                  Tooltip = String.Format("There are {0} versions in your language", item.Versions.Count)  
                              };  
                 return descriptor;  
             }  
             return null;  
         }  
     }  
 }  

The final thing to do is add the gutter menu option in the core database. This is located in /sitecore/content/Applications/Content Editor/Gutters.  Create a new Gutter Renderer item in that folder and add your assembly type.


And thats it!  You will now get the menu item in the right-click of the content editor gutter.

Example screenshots:
en-GB


pt-BR