Icons in the page tree

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>
 

And the code is like this

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.

Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

See all blogs