Julian Wraith

Menu Close

Tag: SDL Tridion 2011

Not Just Another Tridion GUI Extension

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

Community challenge; YouTube CME Extension

Read the YouTube CME Extension use case and how you can get involved at Chris Summer’s blog

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.

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">
<installpath>C:\Extensions\HelloWorld</installpath>
<configuration>config\HelloWorld.config</configuration>
<vdir>HelloWorld</vdir>
</editor>

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

Implementation
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:

Type.registerNamespace("Common.Tridion.MVP.HelloWorld");
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!");
};

Configuration
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:

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

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:contextmenus>
<ext:add>
<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"/>
</cmenu:ContextMenuItem>
Add to the HomePage ribbon bar:
<ext:ribbontoolbars>
<ext:add>
<ext:extension pageid="HomePage" groupid="EditGroup" name="HelloWorld" assignid="HelloWorld" insertbefore="PreviewBtn">
<ext:command>HelloWorld</ext:command>
<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:apply>
<ext:view name="DashboardView">
<ext:control id="DashboardToolbar" />
</ext:view>
</ext:apply>
</ext:extension>
.....

<ext:extension pageid="Greetings" groupid="EditGroup" name="HelloWorld" assignid="HelloWorld">
<ext:command>HelloWorld</ext:command>
<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">
<installpath>C:\Extensions\HelloWorld</installpath>
<configuration>config\HelloWorld.config</configuration>
<vdir>HelloWorld</vdir>
</editor>

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

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

Contribute
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!

© 2019 Julian Wraith. All rights reserved.

Theme by Anders Norén.