Changing the tooltip in the EPiServer page tree

I’m currently working an a project where the editors add meta data to the pages. This meta data contains information about which target audience the information is relevant for.

It’s important for the editor to view the meta data in order to edit the page for the correct target audience.

In the case of several pages in the same part of the structure with similar information, it would be quite tedious for the editor to be forced to click on a page and choose edit to be able to view this information.

After thinking about it for a while I thougt it would be nice to display the meta data in the tooltip.

I didn’t know how to go about this so I started with a bit of googling.

I found a post by Henrik Nyström where he managed to add custom icons to the EPiServer page tree using a control adapter. The module is available over at EPiCode.

After a session with reflector i figured how to manipulate the tooltip.

1. Create a new language file.

The EPiServer page tree tooltip “template” is located in the language<langcode>.xml file. So let’s create a new one.

Here I have added a new row to the tooltip. It’s the identifier between the brackets that we will replace with our own information.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<languages>
    <language name="English" id="en">
        <edit>
            <pageexplorer>
                <tooltip>
                    Page Type: [PageTypeName]&lt;br/&gt;
                    Created: [Created]&lt;br/&gt;
                    Changed: [Changed]&lt;br/&gt;
                    Page ID: [PageLink]&lt;br /&gt;
                    Sort index: [PagePeerOrder]&lt;br /&gt;
                    Custom: [custom]
                </tooltip>
            </pageexplorer>
        </edit>
    </language>
</languag

2. Create a control adapter for the page tree. Don’t forget to add a .browser file in the App_Browsers folder.

At row 31 I add a attribute named custom with a text.

   1:  using System;

   2:  using System.Configuration;

   3:  using System.Collections.Generic;

   4:  using System.Diagnostics;

   5:  using System.Web;

   6:  using System.Web.Security;

   7:  using System.Web.UI;

   8:  using System.Web.UI.WebControls;

   9:  using System.Web.UI.HtmlControls;

  10:  using EPiServer.Core;

  11:  using EPiServer.UI.WebControls;

  12:  using EPiServer.Web.WebControls;

  13:   

  14:  public class PageTreeViewAdapter : System.Web.UI.WebControls.Adapters.HierarchicalDataBoundControlAdapter

  15:  {

  16:   

  17:      protected override void OnInit(System.EventArgs e)

  18:      {

  19:          base.OnInit(e);

  20:          

  21:          Control.PageTreeViewItemDataBound += new PageTreeViewEventHandler(Control_PageTreeViewItemDataBound);

  22:      }

  23:   

  24:      protected new PageTreeView Control

  25:      {

  26:          get { return base.Control as PageTreeView; }

  27:      }

  28:   

  29:      private void Control_PageTreeViewItemDataBound(object sender, PageTreeViewEventArgs e)

  30:      {

  31:          e.Item.Attributes.Add("custom", "Custom tooltip text");

  32:          

  33:      }

  34:  }

3. Compile and you’re done.

If you don’t like the EPiServer standard tooltip you can remove the rows that 

you don’t wan’t to display. Or replace all with just a [custom] tag and create

the tooltip dynamically for different users of maybe per page type.