In today's guide, I'm going to cover how we can set a custom icon for an individual page type. 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.

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. Episerver 7.5+ introduced some additional tweaks to hook into the UI to allow us some degree of control over how content types are displayed. 

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.

To 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.

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

Get all the UI descriptors registered within Episerver, using:

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

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



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 the UIDescriptorRegistry 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: