My First Attempt at Tridion 2011 GUI Extensions

About a month ago I happily shared a GUI extension I’ve built for Tridion 2009 called the Item XML Display extension.
This extension lets a user (typically a developer) view the entire XML structure of a Tridion item from within the GUI without the need to open a new IE window or having a remote session to the CM server.

If you’re one of those already using this extension and have been dreading the moment Tridion 2011 will come out and you will be left without being able to quickly view items’ XML, fear not! I got you covered:

The new upcoming Tridion (2011) version is a major evolution from the Tridion we’ve grown accustomed to. The user interface is different, the core has been ported to .NET, there are new programmatical interfaces to both the content manager and content delivery stacks, its a big change! It’s a good change.

I for one am very glad with these changes because putting major usability advantages aside, they also make Tridion even more extensible than before (and that’s saying something). They also bring Tridion to a whole new level of compatibility with current technologies and coding practices such as brand new WCF and REST webservices, a .NET read/write API, a completely revamped visual interface working on the most popular browsers (Firefox, Chrome, Safari and of course IE) as well as a new GUI Extension framework.

The latter is what I’ve focused on lately, at first I was not too happy to learn a new framework for creating extensions but the new framework is roughly 999,998 times better than its predecessor so after a short learning curve I could really start having fun.

Before I go on to write tutorials about the new framework, I’d like to show (off) my first extension working on the 2011 system.

The photo above shows the Item XML Display extension on the new GUI. You can tell it’s the new GUI because besides seeing a completely new interface behind the overlay is the fact that this screen-grab is showing the extension running in Firefox. And this is another detail of the new extensibility features of the 2011 GUI, creating an extension means that you should test it on all supported browsers (if your users have the freedom to choose):

Yes, I know I haven’t tested it on Safari!

As you can see, the extension works the same as before and has got a prominent place in the ribbon bar and the context menu:

The only thing that doesn’t really work cross-browser yet is the “Copy to clipboard” functionality which unfortunately it seems is not supported out of the box in Firefox or Chrome:

I’ll look into getting this to work on these browsers as well at some point (no promises).

Installation

• Download the extension (link at the bottom).

• Follow my 8 steps guide to set up the extension. [Updated 06/04/2011]

• Done. Restart IIS and clear your browser cache and reload the GUI, you should now be able to use the extension.

Technical Details

A few interesting technical facts about this extension:

• The extension adds a ribbon button to the Home ribbon page and also adds a context menu item.
• The extension uses jQuery to inject the overlay into the GUI website.
• The extension loads a html template from the server for the first time and caches it for later use. The template is used as the basis for the overlay showing the XML.
• Unlike the 2009 version of the extension, this one is not using a server side ASPX to create the HTML representation of the XML, everything is done using an XSLT which is also downloaded and cached on the client side.
• Unlike with the previous version, this one doesn’t need to use a server side ASPX to retrieve the XML of the item, it simply uses the built in methods in the new GUI object model. I know it was possible before in previous Tridion versions but wasn’t exactly straightforward to say the least.

Still to come

This is just the beginning of what I plan on sharing about this new and exciting world of Extensibility for the new Tridion platform.

Soon:

• My List-Quick-Helper extension(New).
• General tutorial(s) about writing your own extensions. (In the mean time check out this very useful walthrough by Julian Wraith)
• More exciting extensions still brewing in my head.

Download

New! – The Item XML Display 1.0 is available here.

Update: You can download the 2011 GA version of this extension here.

You can download the extension here.