Anders Hattestad
Dec 24, 2010
  7029
(1 votes)

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

Comments

chris.randall@valtech.com
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
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.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog