🔧 Maintenance Alert: World will be on Read-Only Mode on February 18th, 10:00 PM – 11:00 PM EST / 7:00 PM – 8:00 PM PST / 4:00 AM – 5:00 AM CET (Feb 19). Browsing available, but log-ins and submissions will be disabled.

AI OnAI Off
Anders Hattestad
Anders Hattestad
Dec 24, 2010
  7939
(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
The missing globe can finally be installed as a nuget package!

Do you feel like you're dying a little bit every time you need to click "Options" and then "View on Website"? Do you also miss the old "Globe" in...

Tomas Hensrud Gulla | Feb 14, 2025 | Syndicated blog

Cloudflare Edge Logs

Optimizely is introducing the ability to access Cloudflare's edge logs, which gives access to some information previously unavailable except throug...

Bob Davidson | Feb 14, 2025 | Syndicated blog

Comerce Connect calatog caching settings

A critical aspect of Commerce Connect is the caching mechanism for the product catalog, which enhances performance by reducing database load and...

K Khan | Feb 14, 2025

CMP DAM asset sync to Optimizely Graph self service

The CMP DAM integration in CMS introduced support for querying Optimizly Graph (EPiServer.Cms.WelcomeIntegration.Graph 2.0.0) for metadata such as...

Robert Svallin | Feb 13, 2025

See all blogs