Per Nergård
Jan 31, 2010
  4140
(0 votes)

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.
 
 
Jan 31, 2010

Comments

Please login to comment.
Latest blogs
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

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog