Views: 6610
Number of votes: 1
Average rating:

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
  1. public interface IHaveStatusIcons
  2. {
  3.     List<Image> StatusIcons();
  4. }
  5. public interface IHavePageIcon
  6. {
  7.     Image PageIcon();
  8. }

 

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,

image

Code Snippet
  1. public class BasePageType : TypedPageData, IHaveStatusIcons
  2. {
  3.     #region IHaveStatusIcons Members
  4.     bool IsPageForEveryOne(PageData page)
  5.     {
  6.         foreach (KeyValuePair<string, AccessControlEntry> pair in page.ACL)
  7.         {
  8.             if (pair.Value.Name == "Everyone" && ((pair.Value.Access & AccessLevel.Read) == AccessLevel.Read))
  9.                 return true;
  10.         }
  11.         return false;
  12.     }
  13.  
  14.     public virtual List<System.Web.UI.WebControls.Image> StatusIcons()
  15.     {
  16.         List<Image> list = new List<Image>();
  17.         if (!IsPageForEveryOne(this))
  18.         {
  19.             Image icon = new Image();
  20.             icon.ImageUrl = "/images/noaccess.jpg";
  21.             icon.Height = Unit.Pixel(11);
  22.             icon.ToolTip = "Everyone have no access";
  23.             list.Add(icon);
  24.         }

 

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

Code Snippet
  1. <browsers>
  2.   <browser refID="Default">
  3.     <controlAdapters>
  4.         <adapter controlType="EPiServer.UI.WebControls.PageTreeView" adapterType="Itera.Adapters.PageTreeViewAdapter" />
  5.     </controlAdapters>
  6.   </browser>
  7. </browsers>

 

And the code is like this

Code Snippet
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI.WebControls.Adapters;
  6. using EPiServer.UI.WebControls;
  7. using EPiServer.Core;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI;
  10.  
  11. namespace Itera.Adapters
  12. {
  13.     public interface IHaveStatusIcons
  14.     {
  15.         List<Image> StatusIcons();
  16.     }
  17.     public interface IHavePageIcon
  18.     {
  19.         Image PageIcon();
  20.     }
  21.  
  22.     public class PageTreeViewAdapter : HierarchicalDataBoundControlAdapter
  23.     {
  24.         private static readonly string _nodeIconCssClass = "typeicon";
  25.         private static readonly string _statusIconCssClass = "statusicon";
  26.         private static readonly string _statusIconContainerCssClass = "iconcontainer";
  27.         protected new PageTreeView Control
  28.         {
  29.             get
  30.             {
  31.                 return base.Control as PageTreeView;
  32.             }
  33.         }
  34.  
  35.         protected override void OnInit(EventArgs e)
  36.         {
  37.             base.OnInit(e);
  38.             if (Control == null)
  39.                 throw new InvalidOperationException("This Adapter can only be used with the EPiServer.WebControls.PageTreeView. Check your .browser settings file.");
  40.  
  41.             Control.PageTreeViewItemDataBound += new PageTreeViewEventHandler(Control_PageTreeViewItemDataBound);
  42.         }
  43.  
  44.         private void Control_PageTreeViewItemDataBound(object sender, PageTreeViewEventArgs e)
  45.         {
  46.             AddTreeNodeIcons(e.Item);
  47.         }
  48.  
  49.         protected virtual void AddTreeNodeIcons(PageTreeNode node)
  50.         {
  51.             if (node == null)
  52.                 throw new ArgumentNullException("node");
  53.  
  54.             var page = node.DataItem as PageData;
  55.             if (page != null)
  56.             {
  57.                 Image icon = null;
  58.                 if (page is IHavePageIcon)
  59.                 {
  60.                     icon = (page as IHavePageIcon).PageIcon();
  61.                     if (icon != null)
  62.                     {
  63.                         icon.CssClass = string.Format("{0} {1}", _nodeIconCssClass, icon.Attributes["class"]).TrimEnd();
  64.                         node.TemplateContainer.Controls.AddAt(0, icon);
  65.                     }
  66.                 }
  67.                 if (page is IHaveStatusIcons)
  68.                 {
  69.                     Control statusIconContainer = GetStatusIconContainer(node.TemplateContainer.Controls);
  70.                     if (statusIconContainer != null)
  71.                     {
  72.                         List<Image> icons = (page as IHaveStatusIcons).StatusIcons();
  73.                         if (icons != null)
  74.                         {
  75.                             foreach (var ic in icons)
  76.                             {
  77.                                 ic.CssClass = string.Format("{0} {1}", _statusIconCssClass, ic.Attributes["class"]).TrimEnd();
  78.                                 statusIconContainer.Controls.Add(ic);
  79.                             }
  80.                         }
  81.                     }
  82.                 }
  83.             }
  84.         }
  85.  
  86.         protected virtual Control GetStatusIconContainer(ControlCollection nodeControls)
  87.         {
  88.             if (nodeControls != null)
  89.             {
  90.                 // Container should be at the end, so start from the back
  91.                 for (int i = nodeControls.Count - 1; i >= 0; i--)
  92.                 {
  93.                     WebControl container = nodeControls[i] as WebControl;
  94.                     if (container != null && string.Equals(_statusIconContainerCssClass, container.CssClass))
  95.                     {
  96.                         return container;
  97.                     }
  98.                 }
  99.             }
  100.             return null;
  101.         }
  102.     }
  103. }
Dec 24, 2010

Chris Randall
(By Chris Randall, 12/27/2010 6:45:10 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
(By Anders Hattestad, 12/27/2010 6:33:03 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.