Shamrez Iqbal
Dec 16, 2014
  4810
(6 votes)

Changing the tooltip in the Page Tree

A customer wanted to show some more data in the page tree tooltip. This obviously meant extending the user interface in some way, but the first step was to figure out where the tooltip was set.

Where Are You being made?

We started digging in using the F12 tools in Chrome to figure out the where the tooltip was generated.

clip_image002

We started by unpacking the clientresources archives and searched for the attach-points in the markup, such as “rowNode” but the files were minified so it was a hopeless task – and we got many matches.

After looking at a page here on World, it turned out that there was a nuget package with the unminified debug version javascript files. After installing this package the they could be enabled by changing web.config the following way:

<episerver.framework>
<clientResources debug="true" />
.
.
.
</episerver.framework>

An interesting thing was that this seems to work regardless of installing the nuget package.

Things got slightly easier and we eventually figured out that the tooltip was being set in

\epi-cms\component\PageNavigationTree.js

 getTooltip: function (item) {
            // summary:
            //        Overridden function to select data for the tooltip
            // tags:
            //        public, extension

            //We create a content reference and use the id to hide the provider key for the user.
            var reference = new ContentReference(item.contentLink),
                baseTooltip = this.inherited(arguments);
            return baseTooltip + ", " + headingResources.id + ": " + reference.id +
                " (" + headingResources.type + ": " + item.contentTypeName + ")";
        },

Where can we fix you?

The next task was figuring out how to change this,

One way to fix it would be to modify the js directly in the zip but that change would be lost the minute a new nuget package was available – which meant about 2 weeks.

An extension point was needed, and after lots more digging we found one

this.contentRepositoryDescriptors = this.contentRepositoryDescriptors || dependency.resolve("epi.cms.contentRepositoryDescriptors");
var settings = this.contentRepositoryDescriptors[this.repositoryKey];

var componentType = settings.customNavigationWidget || "epi-cms/component/ContentNavigationTree";

Using F12 debugging we figured out the values in settings-object which came from a a contentRepositoryDescriptor

the RepositoryKey was set to “pages”, and the extensionpoint would be settings.customNavigationWidget.

Now, the hard part was to figure out how to set the customNavigationWidget, we looked at creating Components, ContentDescriptors, ContentRepositories and eventually found a class called PageRepositoryDescriptor which was where the settings-data came from.

How can we fix you?

There are four classes which inherit from ContentRepositoryDescriptorBase and they are all registered in StructureMap using the ServiceConfiguration-attribute. And they are exposed as an enumerable.
We started by adding our own class which inherited PageRepositoryDescriptor and changed the customNavigationWidget setting

 

public class OurDescriptor : PageRepositoryDescriptor
    {

        public override string CustomNavigationWidget
        {
            get
            {
                return "alloy/widget/foo";
            }
        }
        
    }

 

We tried adding the serviceconfiguration attribute to this but this broke the application because the Key-property wasn’t unique so what we instead wanted the container to do was to provide our implementation each time PageRepositoryDescriptor was requested.

This was achieved by creating a configurationModule

 

[InitializableModule]

[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]

public class DescriptorInitialization : IConfigurableModule

{

public void ConfigureContainer(ServiceConfigurationContext context)

{

context.Container.Configure(ConfigureContainer);

}

private static void ConfigureContainer(ConfigurationExpression container)

{

container.IfTypeMatches(type => type.Equals(typeof(PageRepositoryDescriptor))).InterceptWith(i => new OurDescriptor ());

}

}

 

Building and testing this was a success and there was a request to alloy/widget/foo which we now had to implement.

The following lines were added to modules.config

<clientResources>

<add name="alloy.widget.foo" path="Scripts/foo.js" resourceType="Script" />

</clientResources>

And finally a the javascript file called foo.js

We started with a copy and paste of the existing ContentNavigationTree, but all methods except the tooltip method was removed, the define function was changed, and ContentNavigationTree was added as a dependency and provided as the base class for this component (first parameter in declare(..) )

 

define("alloy/widget/foo", [

// dojo

"dojo/_base/array",

"dojo/_base/connect",

"dojo/_base/declare",

"dojo/_base/lang",

"dojo/dom-class",

"dojo/topic",

"dojo/when",

// epi

"epi/dependency",

"epi/string",

"epi/shell/ClipboardManager",

"epi/shell/command/_WidgetCommandProviderMixin",

"epi/shell/selection",

"epi/shell/TypeDescriptorManager",

"epi/shell/widget/dialog/Alert",

"epi/shell/widget/dialog/Confirmation",

"epi-cms/_ContentContextMixin",

"epi-cms/_MultilingualMixin",

"epi-cms/ApplicationSettings",

"epi-cms/contentediting/PageShortcutTypeSupport",

"epi-cms/command/ShowAllLanguages",

"epi-cms/component/_ContentNavigationTreeNode",

"epi-cms/component/ContentContextMenuCommandProvider",

"epi-cms/contentediting/ContentActionSupport",

"epi-cms/core/ContentReference",

"epi-cms/widget/ContentTree",

"epi-cms/component/ContentNavigationTree",

"epi/shell/widget/ContextMenu",

// resources

"epi/i18n!epi/cms/nls/episerver.cms.components.createpage",

"epi/i18n!epi/cms/nls/episerver.cms.components.pagetree",

"epi/i18n!epi/cms/nls/episerver.shared.header"

],

function (

// dojo

array,

connect,

declare,

lang,

domClass,

topic,

when,

// epi

dependency,

epistring,

ClipboardManager,

_WidgetCommandProviderMixin,

Selection,

TypeDescriptorManager,

Alert,

Confirmation,

_ContentContextMixin,

_MultilingualMixin,

ApplicationSettings,

PageShortcutTypeSupport,

ShowAllLanguagesCommand,

_ContentNavigationTreeNode,

ContextMenuCommandProvider,

ContentActionSupport,

ContentReference,

ContentTree,

connavtree,

ContextMenu,

// resources

resCreatePage,

res,

headingResources

) {

return declare([connavtree], {

// summary:

// Light weight Page tree component.

// description:

// Extends epi.cms.widget.PageTree to provide global messaging capability.

// tags:

// internal xproduct

getTooltip: function (item) {

// summary:

// Overridden function to select data for the tooltip

// tags:

// public, extension

//We create a content reference and use the id to hide the provider key for the user.

var reference = new ContentReference(item.contentLink),

baseTooltip = this.inherited(arguments);

return baseTooltip + ", " + headingResources.id + ": " + reference.id +

" (" + headingResources.type + ": " + item.contentTypeName + ")" + "Changed: " + item.changed;

}

});

});

 

And now the tooltip shows the changed date of the page as well.

Dec 16, 2014

Comments

Dec 16, 2014 12:54 PM

Great post! I especially like the way you have structure it; instead of just presenting us with a solution, you've involved us in the process of how to figure out what to do.

Johan Book
Johan Book Dec 17, 2014 01:14 AM

Thumbs up!

K Khan
K Khan Dec 17, 2014 12:48 PM

Thanks for sharing this.

Dec 17, 2014 01:31 PM

Thanks! I second Anders praise. :)

Dec 18, 2014 08:41 AM

Awesome, just what I needed :-)

Please login to comment.
Latest blogs
Multiple Anonymous Carts created from external Head front fetching custom Api

Scenario and Problem Working in a custom headless architecture where a NextJs application hosted in Vercel consumes a custom API built in a...

David Ortiz | Oct 11, 2024

Content Search with Optimizely Graph

Optimizely Graph lets you fetch content and sync data from other Optimizely products. For content search, this lets you create custom search tools...

Dileep D | Oct 9, 2024 | Syndicated blog

Omnichannel Analytics Simplified – Optimizely Acquires Netspring

Recently, the news broke that Optimizely acquired Netspring, a warehouse-native analytics platform. I’ll admit, I hadn’t heard of Netspring before,...

Alex Harris - Perficient | Oct 9, 2024 | Syndicated blog

Problem with language file localization after upgrading to Optimizely CMS 12

Avoid common problems with xml file localization when upgrading from Optimizely CMS 11 to CMS 12.

Tomas Hensrud Gulla | Oct 9, 2024 | Syndicated blog