Icons in the page tree

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More.

There are several ways to add icons in the page tree in EPiServer. And here is one more :)

If you are using strong typed pages you can implement one of two interfaces

Code Snippet
 public interface IHaveStatusIcons
{
    List<Image> StatusIcons();
}
public interface IHavePageIcon
{
    Image PageIcon();
}
 

Then its easy to add icons inside the page type , since you can override the icons generated, and/or add your own. The code bellow will at an icon on pages that everyone have not access to,

Code Snippet
 public class BasePageType : TypedPageData, IHaveStatusIcons
{
    #region IHaveStatusIcons Members
    bool IsPageForEveryOne(PageData page)
    {
        foreach (KeyValuePair<string, AccessControlEntry> pair in page.ACL)
        {
            if (pair.Value.Name == "Everyone" && ((pair.Value.Access & AccessLevel.Read) == AccessLevel.Read))
                return true;
        }
        return false;
    }
 
    public virtual List<System.Web.UI.WebControls.Image> StatusIcons()
    {
        List<Image> list = new List<Image>();
        if (!IsPageForEveryOne(this))
        {
            Image icon = new Image();
            icon.ImageUrl = "/images/noaccess.jpg";
            icon.Height = Unit.Pixel(11);
            icon.ToolTip = "Everyone have no access";
            list.Add(icon);
        }
 

The whole code is not very long, and you need to register the page adaptor like this

Code Snippet
 <browsers>
  <browser refID="Default">
    <controlAdapters>
        <adapter controlType="EPiServer.UI.WebControls.PageTreeView" adapterType="Itera.Adapters.PageTreeViewAdapter" />
    </controlAdapters>
  </browser>
</browsers>
 

Code Snippet
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls.Adapters;
using EPiServer.UI.WebControls;
using EPiServer.Core;
using System.Web.UI.WebControls;
using System.Web.UI;
 
namespace Itera.Adapters
{
    public interface IHaveStatusIcons
    {
        List<Image> StatusIcons();
    }
    public interface IHavePageIcon
    {
        Image PageIcon();
    }
 
    public class PageTreeViewAdapter : HierarchicalDataBoundControlAdapter
    {
        private static readonly string _nodeIconCssClass = "typeicon";
        private static readonly string _statusIconCssClass = "statusicon";
        private static readonly string _statusIconContainerCssClass = "iconcontainer";
        protected new PageTreeView Control
        {
            get
            {
                return base.Control as PageTreeView;
            }
        }
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            if (Control == null)
                throw new InvalidOperationException("This Adapter can only be used with the EPiServer.WebControls.PageTreeView. Check your .browser settings file.");
 
            Control.PageTreeViewItemDataBound += new PageTreeViewEventHandler(Control_PageTreeViewItemDataBound);
        }
 
        private void Control_PageTreeViewItemDataBound(object sender, PageTreeViewEventArgs e)
        {
            AddTreeNodeIcons(e.Item);
        }
 
        protected virtual void AddTreeNodeIcons(PageTreeNode node)
        {
            if (node == null)
                throw new ArgumentNullException("node");
 
            var page = node.DataItem as PageData;
            if (page != null)
            {
                Image icon = null;
                if (page is IHavePageIcon)
                {
                    icon = (page as IHavePageIcon).PageIcon();
                    if (icon != null)
                    {
                        icon.CssClass = string.Format("{0} {1}", _nodeIconCssClass, icon.Attributes["class"]).TrimEnd();
                        node.TemplateContainer.Controls.AddAt(0, icon);
                    }
                }
                if (page is IHaveStatusIcons)
                {
                    Control statusIconContainer = GetStatusIconContainer(node.TemplateContainer.Controls);
                    if (statusIconContainer != null)
                    {
                        List<Image> icons = (page as IHaveStatusIcons).StatusIcons();
                        if (icons != null)
                        {
                            foreach (var ic in icons)
                            {
                                ic.CssClass = string.Format("{0} {1}", _statusIconCssClass, ic.Attributes["class"]).TrimEnd();
                                statusIconContainer.Controls.Add(ic);
                            }
                        }
                    }
                }
            }
        }
 
        protected virtual Control GetStatusIconContainer(ControlCollection nodeControls)
        {
            if (nodeControls != null)
            {
                // Container should be at the end, so start from the back
                for (int i = nodeControls.Count - 1; i >= 0; i--)
                {
                    WebControl container = nodeControls[i] as WebControl;
                    if (container != null && string.Equals(_statusIconContainerCssClass, container.CssClass))
                    {
                        return container;
                    }
                }
            }
            return null;
        }
    }
}
 

Dec 24, 2010

Comments

chris.randall@valtech.com Dec 27, 2010 05:45 AM

Interesting example - though it will be interesting to see which one is the easiest to implement. I would like to see a plugin that allows me to configure all of this stuff in admin mode.

Nice work though.

Anders Hattestad Dec 27, 2010 05:33 PM

There are a lot of great plugins for tree icons. Personally I like the closeness of the icons to the page data class as this approcess uses.

Please login to comment.