Julian Wraith

Menu Close

Tag: programming

Not Just Another Tridion GUI Extension

Not Just Another Tridion GUI Extension… you’re not joking at all!

CME Extensions: finding the unique button IDs

In my last post I covered the example of a Tridion 2011 CME extension that would show nice pop-ups of not very useful information. For this we registered, in our HelloWorld.config, where the button  would be loaded and in our Home ribbon we register the button as:

<ext:extension pageid="HomePage" groupid="EditGroup" name="HelloWorld" assignid="HelloWorld" insertbefore="PreviewBtn">

Amongst our attributes we have the attribute insertBefore. InsertBefore tells the extension mechanism where to insert the button; in this case, insert before the Preview button. “PreviewBtn” is a keyword and it is required to get this right so the the CME knows where you intend to place your button. So how do we know what the right keyword is?

We can do this with Firebug on Firefox and it is very easy to do. Open the CME in Firefox and navigate to the ribbon (or menu) where you will want your button to appear. Turn on Firebug and select the highlight button:

Then select the button that will be after where you want your button to appear, in this case the button or Previewing content. You will then see in Firebug then div of the Preview button. The ID of the div is the ID of the button you will insert before:

In our particular example, another parameter is the “groupid” and in this case it is set with the value of “EditGroup”. This is also available in the html and can be found higher up in the HTML:

You can use other similar tools to inspect the HTML (such as CTL+SHIFT+J on Google Chrome) but I find Firebug the easiest.

Chris Summers: The SDL Tridion MVP Fondue Kit

Fellow Tridion MVP, Chris Summers has posted a sneak preview of what we did on the MVP meetup. Read more about it here.

HelloWorld Extension for Tridion 2011

The HelloWorld extension is an example extension, from MVP Fondue, for the Tridion Content Manager Explorer (CME) which is designed to work on Tridion 2011. It does not do anything but give you a simple introduction into the how to hook an extension into the various points of the CME. This should give you the basis for exploring the use of extensions further.

Installing the HelloWorld example

Unpack the HelloWorld sample

Unzip the HelloWorld.zip and copy the files a directory where you will store your extensions. This does not have to be under the Tridion home directory.

Within this zip file you will find both the extension and a Microsoft Visual Solution for developing the extension further.

Create Virtual directory
In Internet Information Services (IIS) Manager, create a virtual directory under your Tridion 2011 websites under CME\Editors.

Give your virtual directory the name “HelloWorld” and point the path to the directory where you unpacked the HelloWorld example:

Grant read permissions only

Configure Tridion to load the extension

1.    Go to the CME configuration folder C:\Program Files\Tridion\CME2010\WebRoot\Configuration
2.    Select the System.Config file and make a backup copy of this file
3.    Open the System.Config in a XML (or text) editor and add the following section as the last sub-element of the XML element “<editors default=”CME”>”:

<editor name="HelloWorld">

4.    Hard refresh (CTL+F5 on IE) your browser
5.    View the extension

You can now see the extension appearing in three places:
On the Home ribbon bar:

On the “Greetings “ ribbon bar:

As a context menu:

About the extension

The extension does not do anything productive, but instead shows you a popup box when it is clicked and as such the javascript code for this is very simple and not worth going into.  However, it does use the same concepts that any other extension would need. The HelloWorld.js (under the commands directory) implements the functions we need to enable both the popup box to show (execute) but also whether or not the button is enabled (isEnabled) and lastly if the button option is available in this context (isAvailable). IsEnabled’s task is to enable the button for the given context, for example, we don’t have the option to create a Component when in a Structure Group so the New Component button is disabled when in a Structure Group. Whether or not the button is available will depend upon actions of the user; for example maybe I only want to use my button when I have a single item selected and not when I select 2 or more items.
The javascript needed to do all these things in the HelloWorld example is quite simple and is as follows:

Common.Tridion.MVP.HelloWorld = function Commands$HelloWorld() {
Type.enableInterface(this, "Common.Tridion.MVP.HelloWorld");
this.addInterface("Tridion.Cme.Command", [name]);
Common.Tridion.MVP.HelloWorld.prototype.isAvailable = function HelloWorld$isAvailable(selection) {
return true;

Common.Tridion.MVP.HelloWorld.prototype.isEnabled = function HelloWorld$isEnabled(selection) {
return true;
Common.Tridion.MVP.HelloWorld.prototype._execute = function HelloWorld$_execute(selection) {
alert("Hello World!");

In our configuration (HelloWorld.config) we define two things 1) what menus our extension is to show on and 2) what needs to be run when the extension is used (enabled, available or executed).
The run our extension we need to configure a command which in itself defines the javascript that will be run:

<cfg:commandset id="UniqueName3">
<cfg:file id="HelloWorld">/Commands/HelloWorld.js</cfg:file>
<cfg:command name="HelloWorld" implementation="Common.Tridion.MVP.HelloWorld" fileid="HelloWorld"/>

The command name “HelloWorld” is our unique reference to the command and the file is the javascript that will run all the commands.
Next, for each menu we want to run our extension from we will need to define these in the same configuration file.
Insert before the preview button on the context menu under the Greetings menu:

<ext:extension name="Hello World" assignid="" insertbefore="cm_preview">
<ext:menudeclaration externaldefinition="">
<cmenu:ContextMenuItem id="Greetings" name="Greetings">
<cmenu:ContextMenuItem id="HelloWorld" name="Hello World" command="HelloWorld"/>
Add to the HomePage ribbon bar:
<ext:extension pageid="HomePage" groupid="EditGroup" name="HelloWorld" assignid="HelloWorld" insertbefore="PreviewBtn">
<ext:title>Hello World</ext:title>

Create a new ribbon bar called “Greetings” and add my button to it:

<ext:extension pageid="pageid" name="Greetings" assignid="Greetings">
<ext:control />
<ext:pagetype />
<ext:clientextensions />
<ext:view name="DashboardView">
<ext:control id="DashboardToolbar" />

<ext:extension pageid="Greetings" groupid="EditGroup" name="HelloWorld" assignid="HelloWorld">
<ext:title>Hello World</ext:title>

Enabling in the CME
As we saw when we installed the example above, the very last part of the configuration is the addition to the System.Config in the “editors” section:

<editor name="HelloWorld">

This element defines how to load the configuration of our extension, the virtual directory that is used and the path to our extension.

You can download the HelloWorld example extension here. This extension is part of the MVP Fondue.

You too can contribute to the community of Tridion professionals, feel free to comment on this post with your suggestions or changes or even use the HelloWorld example to make your own extension. Don’t forget to share it with the community!

JQuery as a Tridion GUI extension

Cool coding goings on in the world of Yoav. Experiments with JQuery and the Tridion GUI.

Retro Computing: HTML 2.0

To read this article in HTML 2.0, click here. To read it in HTML 4.0, click here.

There is allot of talk at the moment about HTML 5 and far be it from me to jump on the blog post band wagon and post something about HTML 5. For instance, I did not post anything about Day being purchased by Adobe and my feelings about the impending doom to Day customers who fell in love with Day’s great technical marketing and Open Source strategy. My feeling is just that, a feeling, and Adobe and Day tell us this is not the case so I probably should not worry. Anyway, I digress. I have been looking at HTML 5 and it looks to be the best thing to happen to the web since… well since ever.

Since it become geek cool to have a web page, I have had one. That is not to say I was cool, but at least I tried. I have had many, many websites; some successful, others not. In all of those sites there was probably millions of lines of code, some written in beautiful HTML and others written in the crappiest hacked code you have ever seen.

Way back when I started, there was no HTML standard. HTML 2.0 (November 1995) was the first standard and was versioned as 2.0 to separate it from the many informal HTML versions that were around since 1990. Building out pre 2.0 websites using VI, Netscape Navigator browser on our HP-UX terminals seemed like the cutting edge (it was) but now is somewhat laughable when I think about my current development environment and my browser on my phone. By the year 2000, HTML 2.0 was obsolete…

HTML 2.0 defined many features, that we now take for granted, for the first time; HTML, HEAD and BODY all made an official appearance as well as LINK and TITLE. But missing from 2.0 would be things like STYLE (HTML 3.2), DIV (HTML 3.2) and even CENTER (HTML 3.2 and already deprecated) – they might have been available but they were not standard and only available to some browsers. LINK allowed links to style sheets but there was no standard for style sheets and few browsers could even implement the CSS1 standard when it was released a year later (IE 5 was the first to a have full (99%) support for CSS and that was in 2000). To my surprise the trusted BLINK and MARQUEE have never been in a standard, it seems that someone at W3C had some good taste.

Without STYLE and DIV elements, modern web designer would be unable to make any modern design look even passable. But with my trustee P tag at hand and a TABLE or two we can get something like a nice design and get it validated against the 2.0 standard. Oh wait, there is no TABLE element in 2.0 as that was introduced in 3.2. I shall put away the single pixel gif, I have in case of emergencies, for another day.

Other resources:


Friend and coworker, Yoav, as released his Gravatar.NET version of the Gravatar public API. Looks good and fingers cross for many downloads…

Crockford on Javascript

Last week (just to show how long it takes me to think about posting) I had the pleasure to drop into Yahoo’s Sunnyvale offices to see Douglas Crockford lecture on JavaScript. This was part two in a series of lectures by Yahoo’s senior JavaScript Architect and author.

The lecture was very good (and quite detailed) and free pizza was supplied by Yahoo (hey, I have to have a motivator!). I find it good to watch leaders of (any) industry speak. It helps me understand how I should present in the future when I guest speak (next guest presentation is a few months away). I liked the style, content and even the jokes.

I personally am not a JavaScript developer, although I hacked a few things together in the past. As Crockford remarks, we rarely sit down and learn JavaScript, it is something we just often do because we have to. However, it seems there is much to gain from actually knowing what you are doing (this should not really be a surprise).

You can watch the lecture and the previous one on Yahoo! Theater:

© 2020 Julian Wraith. All rights reserved.

Theme by Anders Norén.