Use Episerver's content icons as site tree icons

Editors come first

It is nice to help people, they say. In the world of CMS what couldn't be better than keeping your editors' satisfied? One way of doing this is by helping them to structurize the content they face daily. You may achieve this by giving the different page types you create a site tree icon in the edit view. This is what we will be focusing on today with this blog post.

The end result will look something like this:

Steps to follow

We will start of by creating a class that will hold the default Episerver icons whom are provided within the CMS. If you head over to the official Episerver UX guidelines you will find the section marked with icons. There are currently three different types of icon sets you may choose from: action icons, object icons and notification icons.

Unfortunately, just as Johan Petersson points out in his blog post about the built in icons, Episerver themselves have not included a container class for this. So that is what we will be starting of with.

The code for that class should look like this:

namespace MyEpiserverSite
{
    /// <summary>
    /// Container of Episerver content icons.
    /// For more details, visit Episerver's official UX link: http://ux.episerver.com/#icons
    /// </summary>
    public static class EpiserverDefaultContentIcons
    {
        #region [ Action Icons ]
        public class ActionIcons
        { 
            public const string Clock = "epi-iconClock";
            public const string Checkmark = "epi-iconCheckmark";
            public const string Stop = "epi-iconStop";
            public const string Versions = "epi-iconVersions";
            public const string Revert = "epi-iconRevert";
            public const string Undo = "epi-iconUndo";
            public const string Redo = "epi-iconRedo";
            public const string Pen = "epi-iconPen";
            public const string PenDisabled = "epi-iconPenDisabled";
            public const string DuplicatePage = "epi-iconDuplicatePage";
            public const string Primary = "epi-iconPrimary";
            public const string Trash = "epi-iconTrash";
            public const string Users = "epi-iconUsers";
            public const string Search = "epi-iconSearch";
            public const string Plus = "epi-iconPlus";
            public const string Minus = "epi-iconMinus";
            public const string Star = "epi-iconStar";
            public const string Settings = "epi-iconSettings";
            public const string Lock = "epi-iconLock";
            public const string Pin = "epi-iconPin";
            public const string Page = "epi-iconPage";
            public const string Folder = "epi-iconFolder";
            public const string SharedBlock = "epi-iconSharedBlock";
            public const string Up = "epi-iconUp";
            public const string Down = "epi-iconDown";
            public const string Reload = "epi-iconReload";
            public const string Share = "epi-iconShare";
            public const string Download = "epi-iconDownload";
            public const string DnD = "epi-iconDnD";
            public const string ContextMenu = "epi-iconContextMenu";
            public const string Rename = "epi-iconRename";
            public const string Left = "epi-iconLeft";
            public const string Right = "epi-iconRight";
            public const string User = "epi-iconUser";
            public const string Hidden = "epi-iconHidden";
            public const string NewWindow = "epi-iconNewWindow";
            public const string Catalog = "epi-iconCatalog";
            public const string Category = "epi-iconCategory";
            public const string Product = "epi-iconProduct";
            public const string SKU = "epi-iconSKU";
            public const string Package = "epi-iconPackage";
            public const string Bundle = "epi-iconBundle";
            public const string Boxes = "epi-iconBoxes";
            public const string References = "epi-iconReferences";
            public const string Bubble = "epi-iconBubble";
            public const string Location = "epi-iconLocation";
            public const string Mail = "epi-iconMail";
            public const string Telephone = "epi-iconTelephone";
            public const string Website = "epi-iconWebsite";
            public const string Link = "epi-iconLink";
            public const string Upload = "epi-iconUpload";
            public const string Error = "epi-iconError";
            public const string Warning = "epi-iconWarning";
            public const string Info = "epi-iconInfo";
            public const string Pricing = "epi-iconPricing";
            public const string Cut = "epi-iconCut";
            public const string Copy = "epi-iconCopy";
            public const string Paste = "epi-iconPaste";
            public const string Detach = "epi-iconDetach";
            public const string List = "epi-iconList";
            public const string Thumbnails = "epi-iconThumbnails";
            public const string Tiles = "epi-iconTiles";
            public const string Project = "epi-iconProject";
            public const string Published = "epi-iconPublished";
            public const string PreviouslyPublished = "epi-iconPreviouslyPublished";
            public const string Truck = "epi-iconTruck";
            public const string Cart = "epi-iconCart";
            public const string Sort = "epi-iconSort";
            public const string Campaign = "epi-iconCampaign";
            public const string PublishProject = "epi-iconPublishProject";
            public const string Promotion = "epi-iconPromotion";
            public const string Layout = "epi-iconLayout";
            public const string SortAscending = "epi-iconSortAscending";
            public const string SortDescending = "epi-iconSortDescending";
            public const string Edited = "epi-iconEdited";
            public const string Bell = "epi-iconBell";
            public const string Help = "epi-iconHelp";
            public const string Segments = "epi-iconSegments";
            public const string Guides = "epi-iconGuides";
        }
        #endregion

        #region [ Object icons ]

        public class ObjectIcons
        {
            public const string Root = "epi-iconObjectRoot";
            public const string Trash = "epi-iconObjectTrash";
            public const string Start = "epi-iconObjectStart";
            public const string Page = "epi-iconObjectPage";
            public const string Container = "epi-iconObjectContainer";
            public const string InternalLink = "epi-iconObjectInternalLink";
            public const string ExternalLink = "epi-iconObjectExternalLink";
            public const string NoLink = "epi-iconObjectNoLink";
            public const string FetchContent = "epi-iconObjectFetchContent";
            public const string ContainerFetchContent = "epi-iconObjectContainerFetchContent";
            public const string SharedBlock = "epi-iconObjectSharedBlock";
            public const string Folder = "epi-iconObjectFolder";
            public const string FolderOpen = "epi-iconObjectFolderOpen";
            public const string Catalog = "epi-iconObjectCatalog";
            public const string Category = "epi-iconObjectCategory";
            public const string Product = "epi-iconObjectProduct";
            public const string Variation = "epi-iconObjectVariation";
            public const string Package = "epi-iconObjectPackage";
            public const string Bundle = "epi-iconObjectBundle";
            public const string Unknown = "epi-iconObjectUnknown";
            public const string Image = "epi-iconObjectImage";
            public const string FolderAllSites = "epi-iconObjectFolderAllSites";
            public const string FolderThisSite = "epi-iconObjectFolderThisSite";
            public const string PageContextual = "epi-iconObjectPageContextual";
            public const string SharedBlockContextual = "epi-iconObjectSharedBlockContextual";
            public const string OptimizingBlockContextual = "epi-iconObjectOptimizingBlockContextual";
            public const string ProductContextual = "epi-iconObjectProductContextual";
            public const string ContainerContextual = "epi-iconObjectContainerContextual";
            public const string Video = "epi-iconObjectVideo";
            public const string ExternalFolder = "epi-iconObjectExternalFolder";
            public const string ExternalFolderOpen = "epi-iconObjectExternalFolderOpen";
            public const string Item = "epi-iconObjectItem";
            public const string Cart = "epi-iconObjectCart";
            public const string Truck = "epi-iconObjectTruck";
            public const string Campaign = "epi-iconObjectCampaign";
            public const string Promotion = "epi-iconObjectPromotion";
            public const string Project = "epi-iconObjectProject";
        }

        #endregion

        #region [ Notification Icons ]

        public class NotificationIcons
        { 
            public const string Success = "epi-iconSuccess";
            public const string Warning = "epi-iconWarning";
            public const string Danger = "epi-iconDanger";
            public const string Info = "epi-iconInfo";
        }

        #endregion
    }
}

Once we have declared our class for all of the Episerver CSS classes for the icons we shall move on with creating an UIDescriptor that will be rendering the site tree icon. The UIDescriptor will be instantiated as an interface to use for the page types later on. Create a new code behind file and do the following:

using EPiServer.Shell;

namespace MyEpiserverSite.Business.UIDescriptors.TreeIcons
{
    [UIDescriptorRegistration]
    public class ArticleTreeIconDescriptor : UIDescriptor<IUseArticleTreeIcon>
    {
        public ArticleTreeIconDescriptor()
        {
            IconClass = EpiserverDefaultContentIcons.ObjectIcons.Category;
        }
    }
    public interface IUseArticleTreeIcon
    {
    }
}

The ArticleTreeIconDescriptor class above will be inheriting the UIDescriptor with the use of the interface IUseArticleTreeIcon, which is declared in the same file. By doing like this we may use the built in IconClass property to be set to our former created class for the Episerver default icons. By using the base of dijitIcon we explicitely tell Episerver to look for the shipped icons within Episerver.

What remains now is to actually use this on a page type of our liking. Create a new page type of your chosen attributes and make sure the class is inheriting by the interface we just created:

using System.ComponentModel.DataAnnotations;
using MyEpiserverSite.Business.UIDescriptors.TreeIcons;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace MyEpiserverSite.Models.Pages
{
    [ContentType(
        GUID = "",
        DisplayName = "",
        Description = "Article page",
        Order = 10,
        GroupName = "Content")]
    public class ArticlePageType : IUseArticleTreeIcon
    {
        //
        /* ... code goes here */
        //        
    }
}

This will render the given icon of Episerver in the edit view, making your editors happier for making better choices when navigation and structuring the site.

This approach should be manageable with Episerver CMS 9 and 10, at least. A heads up is that structuring the files in your solution may be of a favor, since using a lot of different icons will be using a lot of different tree icon files.

As an addition to this blog post there is now also a way to colorize your site tree icons. You can read about it here!

Happy structurizing!