How To Use Custom Icons For Specific Page Types In The Episerver Navigation Tree

I’ve said repeatedly on this site, that one key but often overlooked part of any successful CMS projects is making the content editors happy. The content editors are the people who will use the CMS on a daily basis, if you fail to architecture the website into well-designed page types and blocks, they will be the people who will moan the loudest.

From 7.5+, EPiServer introduced some additional tweaks to hook into the UI to allow us some degree of control over how content types are displayed. In today’s guide, I’m going to cover how we can set a custom icon for an individual page type.

Getting Started

In order for us to get going with our customization, we will need to use a UI descriptor. When your website loads, in the background Episerver goes out and creates a number of ‘EPiServer.Shell.UIDescriptor’ objects that define how various things within the editor will behave. The UIDescriptor allows us then to hook into Episerver and tell Episerver how to behave.

I’ve talked previously about the benefit of container pages in How To Deal With Large Amounts Of PageTypes . In today’s code snippet, I’m going to use the same principle, that any page type that implements the IContainer interface will get a folder displayed in the navigation tree.

To get this up and running, we will use an initialization module. An initialization module will be invoked after Episerver has set-up the default UIDescriptor for the editor. What we are going to do is use the ‘UIDescriptorRegistry’ API to get a list of these populated UIDescriptor, use reflection to find the page types that implement the IContainer interface and update the matching UI Descriptors icon property to a custom one.

Note: This code sample uses the my JonDJones.IconPack, available from here.

using System.Linq;
using System.Reflection;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.Shell;
using JonDJones.com.Core.Interfaces;
using JonDJones.IconPack;
namespace JonDJones.com.Core.IntialisationModule
{
[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class ContainerPageUIDescriptorModule : IInitializableModule
{
public void Initialize(InitializationEngine context)
{
SetIcons(context.Locate.Advanced.GetInstance<UIDescriptorRegistry>());
}
private static void SetIcons(UIDescriptorRegistry uiDescriptorRegistry)
{
var instances =
Assembly.GetExecutingAssembly()
.GetTypes()
.Where(t => t.GetInterfaces().Contains(typeof(IContainer)));
var descriptors = uiDescriptorRegistry.GetAllRegisteredUIDescriptors().ToList();
foreach (var instance in instances)
{
var descriptor = descriptors.FirstOrDefault(x => x.ForType.FullName == instance.ToString());
if (descriptor != null)
descriptor.IconClass = ActionIcons.Folder;
}
}
public void Preload(string[] parameters)
{
}
public void Uninitialize(InitializationEngine context)
{
}
}
}

The code is pretty straightforward, we use reflection to get all file type that implements our interface:

var instances =
Assembly.GetExecutingAssembly()
.GetTypes()
.Where(t => t.GetInterfaces().Contains(typeof(IContainer)));

Get all the UI descriptors registered within Episerver, using:

var descriptors = uiDescriptorRegistry.GetAllRegisteredUIDescriptors().ToList();

Then find the one that matches the page type and setting the Icon Class with the JonDJones.IconPack assembly

var descriptor = descriptors.FirstOrDefault(x => x.ForType.FullName == instance.ToString());
if (descriptor != null)
descriptor.IconClass = ActionIcons.Folder;

When you run the code, your editor should look like this:

episerver_icons

Container

In today’s post, I’ve described a way to customize the icons used for specific page types, or page types that implement certain interfaces. This is possible using thebUIDescriptorRegistry to get all the registered UIDescriptos registered for the site. You can then use whatever form of look-up to find the descriptors whose icons you want to change.

There are other ways of creating and registering UIDescriptors, including implicitly registering a descriptor yourself. This can be done with the following code:

[UIDescriptorRegistration]
public class Example : UIDescriptor<PageType>
{
public Example() : base(ActionIcons.Folder)
{
DefaultView = CmsViewNames.AllPropertiesView;
}
}

I’ve been using the IContainer interface on every project since version 7, so I’d always use the initialization module to register all IContainers when I want to customize the icons, so I generally don’t use this approach, but it’s handy to know about it.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *