Changing the Background of the Tridion GUI is a must when you work in different environments. We don’t want to be making changes in Prod when we intended to be logged into Dev.

The Tridion LiveDocumentation site has an excellent article on this called ‘Skinning the Content Manager Explorer’. It took me about 10 minutes to setup one server and less on additional servers.

Finding the right color is the first challenge. I used http://colorschemedesigner.com/ and installed the firefox extension ColorZilla to use the Color picker and choose the Tridion GUI background color. It gave me a nice set of choices.

The next challenge I had was that the text of the Breadcrumb faded into the background and disappeared. To set the text color we need to add 1 style rule to the Development.css file Tridion provides (thanks for the starter file!).

/* Breadcrumbs */
.addressbar .addressbaritem
{
color: white;
}

That’s it! Thanks to the SDL Tridion R&D Team for the nicely documented feature.

Adding a new Tab to the Tridion Edit window is a powerful and easy GUI Extension to implement. The tab will show in all Edit windows or only the ComponentEdit “view”. SDL recently used this approach to integrate the Translation Management System (TMS) and World Server into the interface – great example of the extension! 🙂 In this tutorial we will create a ‘Hello There’ GUI Extension and explain the concepts behind adding an extra tab to the edit screen.

Getting Started
We’ll need the following:

  • Filesystem access to your Tridion 2011 CMS Server (Program Files\Tridion\)
  • Editor for XML, HTML, and ASCX files
  • A Tridion CMS system with no other users logged in (since we will most likely break the GUI at some point)

Summary, we will:
In Visual Studio, create a new project and an ASCX control

In a JavaScript editor, create a simple JavaScript GUI Extension

In an XML editor, create a HelloTab.config file and configure IIS

Copy files to a new folder on the server C:\Program Files (x86)\Tridion\web\WebUI\Editors\HelloTab and update the System.config file

Tips for working with Anguilla Framework

Part 1: Create the GUI Extension Project and add the User Control ASCX File

1. Open Visual Studio 2010 and create a new Project, ASP.NET Empty Web Project.
2. Add a new Web User Control (ascx file) to the project. Name it HelloTab.ascx
3. Add a literal control to the ascx page and in the code behind set the text property to ‘Hello world’.

* Note: I could have created an HTML page, but instead wanted to use an ASCX page to show where the DLL from the bin folder would end up. In real life I prefer to keep the client simple with HTML and jQuery and the heavy lifting in a Web Services layer powered by ServiceStack.net.

HelloTab.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HelloTab.ascx.cs" Inherits="HelloTab.HelloTab" %>
<asp:Literal ID="output" runat="server"></asp:Literal>
<div id="compUri"></div>

HelloTab.ascx.cs

protected void Page_Load(object sender, EventArgs e)
{
    output.Text = "Hello world";
}

Compile and Build the Solution. The DLL will be copied to C:\Program Files (x86)\Tridion\web\WebUI\WebRoot\bin

Part 2: Create the JavaScript

Type.registerNamespace("RC");

RC.HelloTab = function RC$HelloTab$HelloTab(element) {
    console.log('Constructor');
    Tridion.OO.enableInterface(this, "RC.HelloTab");
    this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};

RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
    console.log('init');
    this.callBase("Tridion.Controls.DeckPage", "initialize");
    $evt.addEventHandler($display.getItem(), "load", this.getDelegate(this.updateView));
};

RC.HelloTab.prototype.select = function HelloTab$select() {
    var c = $display.getItem();
    $j("#compUri").text(c.getId());
    console.log('select');
    this.callBase("Tridion.Controls.DeckPage", "select");
    this.updateView();
};

RC.HelloTab.prototype.updateView = function HelloTab$updateView()
{
    console.log('update');
    if (this.isSelected())
    {
        console.log('selected')
    }
};

Tridion.Controls.Deck.registerPageType(RC.HelloTab, "RC.HelloTab");

Order of Events:

  • constructor
  • select
  • initialize
  • updateView
  • selected

Part 3: GUI Extension Configuration and Setup IIS Copy files to server

Creating the config file HellotTab.config:

Create a new file called HelloTab.config. In this example the JavaScript, CSS, and ASPX files are all in the same folder, HelloTab. Here is the source:

<?xml version="1.0"?>
<Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"
               xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration"
							 xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions"
               xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">

  <resources cache="true">
    <cfg:filters />
    <cfg:groups>
      <cfg:group name="RC.HelloTab" merge="always">
        <cfg:fileset>
          <cfg:file type="script">/HelloTab.js</cfg:file>
          <cfg:file type="script">/jquery.js</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
          <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
        </cfg:dependencies>
      </cfg:group>
    </cfg:groups>
  </resources>
  <definitionfiles />
  <extensions>
    <ext:dataextenders/>
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions/>
        <ext:contextmenus/>
        <ext:lists />
        <ext:tabpages>
          <ext:add>
            <ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
              <ext:control>~/HelloTab.ascx</ext:control>
              <ext:pagetype>RC.HelloTab</ext:pagetype>
              <ext:dependencies>
                <cfg:dependency>RC.HelloTab</cfg:dependency>
              </ext:dependencies>
              <ext:apply>
                <ext:view name="ComponentView">
                  <ext:control id="MasterTabControl"/>
                </ext:view>
              </ext:apply>
            </ext:extension>
          </ext:add>
        </ext:tabpages>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands/>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/>
    <navigatorurl/>
    <editurls/>
    <listdefinitions />
    <itemicons/>
    <theme>
      <path>theme/</path>
    </theme>
    <customconfiguration />
  </settings>
</Configuration>

A few things to highlight:

Name the config group:

cfg:group name="RC.HelloTab"

Specify any js or css files needed by the extension:

<cfg:fileset>
  <cfg:file type="script">/HelloTab.js</cfg:file>
</cfg:fileset>

Define standard dependencies:

<cfg:dependencies>
  <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
  <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
</cfg:dependencies>

Define the ID, text for the tab, and location:

<ext:extension assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">

The GUI ASCX control with HTML for the tab:

<ext:control>~/HelloTab.ascx</ext:control>

Define the Namespace and method for the JS file. I missed this the first time and my JS file would not load. Thanks to the StackOverflow post here for the help.

<ext:dependencies>
    <cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>

Specify the Edit view the Tab will appear on:

<ext:apply>
    <ext:view name="ComponentView">
      <ext:control id="MasterTabControl"/>
    </ext:view>
</ext:apply>

More about the Views option
Views – Which edit screen we load our GUI Extension
We can tell Tridion to only load our new Tab when we are editing a Component and not when editing a Template. To do this we’ll need to add a magic View name to the

The Tridion GUI Views are stored on the server at C:\Program Files (x86)\Tridion\web\WebUI\Editors\CME\Views.

The views folder contains some obvious ones like PageView and ComponentView. However, I am not sure about the DashboardView or CustomPageView – and hope that the Tridion Documentation team might come to our rescue here and weed out the ones that are not valid.

  • BluePrintViewerView
  • CategoryView
  • ComponentView
  • ComponentTemplateView
  • CustomPageView
  • DashboardView
  • FolderView
  • KeywordView
  • ListFiltersView
  • MultimediaTypeView
  • PageView
  • PageTemplateView
  • PopupsView
  • PublicationView
  • PublicationTargetView
  • SchemaView
  • SplashScreenView
  • StructureGroupView
  • TargetGroupView
  • TargetTypeView
  • TemplateBuildingBlockView
  • TridionDashboardView
  • UserAccountsView
  • VirtualFolderView
  • WorkflowProcessView

Save the config file. Create a JS file HelloTab.js for the interaction with the Tridion GUI and Anguilla API. Below is a basic example:

Setup Virtual Directory in IIS
– Add VDIR to IIS, point to HelloTab Editor folder
– The name of the VDIR should match the VDIR node in the system.config file.

Part 4: Copy files to Server and update System.config

Create folder and copy files
– Create a new Folder in the Editors folder called ‘HelloTab’. Full path is ‘C:\Program Files (x86)\Tridion\web\WebUI\Editors\HelloTab’
– Copy HelloTab.ascx, HelloTab.js, and HelloTab.config files
– Copy the DLL file from the build output to ‘C:\Program Files (x86)\Tridion\web\WebUI\WebRoot\bin’. This is the location where all the DLLs associated with a GUI Extension are deployed. If you register the DLLs in the GAC then you could place them in another location.

Add Extension to System.config:

<editor name="HelloTab">
  <installpath>C:\Program Files (x86)\Tridion\web\WebUI\Editors\HelloTab\</installpath>
  <configuration>HelloTab.config</configuration>
  <vdir>HelloTab</vdir>
</editor>

Test
The new Tab should appear in the ComponentEdit screen. Great! But, we still need to do something in the tab.  Let’s add some JavaScript and talk with the Anguilla API.

Part 5: Working with the JS Anguilla API

Anguilla is the powerful Tridion JavaScript framework that makes the magic in the Tridion 2011 GUI possible.  Unfortunately, it is not well known and not too many code samples are available yet.  Some hints of methods and objects can be found in the Tridion 2011 Views folder at C:\Program Files (x86)\Tridion\web\WebUI\Editors\CME\Views. The Tridion 2011 PowerTools also use the Anguilla framework and provide additional opportunities to gain hints. SDL Tridion World has the Anguilla documentation available for download in the Documentation downloads section. With all that said – most Tridion developers that I know have a background in server-side Web development and writing OO JavaScript is not in the comfort zone of many, including me.  We have the option to do the minimum in Anguilla and then run to the Core Service to do the heavy lifting – but I hope in the future we can use more of the built-in methods in Anguilla.

Trick for jQuery

Tridion PowerTools use jQuery and have a trick to load it so it does not conflict with Outbound Email. Clever! After adding this then we use $j for our jQuery magic.

var addJquery = function ()
{
    // ... jQuery here ...
    //YM: to avoid conflict with the Outbound Email extension, we define a new shorthand for jQuery
	window.$j = jQuery.noConflict(true);
};
addJquery();

Using jQuery in the JS code:

 $j("#compUri").text("tcm:0-0-0");

Displaying the URI in the Tab

var c = $display.getItem();
$j("#compUri").text(c.getId());

Fun with the Chrome Developer Console and Anguilla:

  1. Set a breakpoint on the line after the var c =
  2. Open the Chrome Debugger
  3. Scripts tab
  4. Component…aspx script
  5. Scroll to bottom of script and find your code. Alternative use the find feature of Chrome. You should see console.log(‘select’);
  6. Add a breakpoint by clicking on the line #
  7. Now refresh and it will stop on that line when you’ve seelcted the new tab. Don’t hit continue yet.
  8. Go to the Console tab, hit c. and amaze at the amount of methods we have available – via the Anguilla JavaScript Framework – at our disposal.

The Tridion Live Documentation contains a very quick guide to Tab GUI Extensions here. Don’t forget to login first before clicking the link.

Summary

This GUI Extension is a simple one and is intended to give you the ideas and some confidence with creating your first one. With the Component URI and the power of the Anguilla Framework you can already do some magic via JavaScript in the tab with this example. However, it is also possible to make a webservice call from the js and do more server-side api work there. I hope you were able to follow along and that this inspires you to create your own extensions. A big thanks to the Tridion community on StackOverflow – without you the article would not be possible.

Get the code

https://github.com/rcurlette/GuiExtensionHelloTab

Tridion 2011 Favorites

May 10th, 2012 | Posted by Robert Curlette in Tridion - (1 Comments)

Tridion 2011 is full of small useful improvements. One of those is the addition of the ‘Favorites’ section next to Custom Pages in the tree menu. We can have shortcuts to Structure Groups, Folders, Pages, Components, and even Categories Keywords. This is very handy, especially for Demos and Tridion Webinars. Saves a lot of time!

Adding an Item to Tridion 2011 Favorites

Sending an item to Favorites is as easy as a right-click on any item.

Then the item is in the Favorites tree.

I use it for my Template Folders and common Structure Groups for publishing.

GUI Customizations with the Favorites

It is possible to use a Data Extender GUI Customization with a Favorites folder the same as we do for any list item in Tridion. Warner Soditus asked a question on SatckOverflow this week and with the help of Nuno (otherwise known as KnewKnow) and Puf we have another good solution for improving the Tridion experience.

Thanks a lot for adding another favorite feature to Tridion 2011!

Tridion 2011 provides too many benefits for the organization and development team to be overlooked any longer. I recently upgraded a system from Tridion 5.3 to Tridion 2011 and it was a lot less scary than I originally thought. Tridion has provided us a better installer and documentation than past versions and an amazing new product full of features. Having the right approach and knowing where to focus your efforts are a key to a successful upgrade. In this post I hope to share some of my experiences with the upgrade and provide some tips to help make it an easy one.

1. Read the install manual and upgrade manual.

No, really, please print it, sit in your favorite chair or lotus position, and read it – all. The Live Documentation site also has it online. Now, go back and circle or highlight things you need to double-check in your environment such as Java version installed on your Deployer or Broker, SQL Server SP version, and the version of Windows Server you are running on the CMS.

2. Upgrade the Database

Tridion provides a great DB tool for upgrading the database, located in the Installer/Database folder named ‘DatabaseManager.exe’.  My database was a 5.3 SP1 SQL Server 2005 DB and the upgrade ran perfectly and was done in around 15 minutes. This is a no risk step and in my experience always works.  Please backup your DB before you begin.

Upgrade both the CMS Database and the Broker Database.

The tool requires the SA account (or one with equivalent permissions) and the password of the TCMDBUser and other Tridion user accounts.

3. Upgrade the CMS

Very easy with the included installer.  The installer has been improved and adds more manual detail control over what is installed. Don’t check Audience Manager (Outbound Email) or Translation Manager (world Server / TMS) unless you are using them. Not nice to have unused Tridion pieces installed and not configured in your environment – and also not nice to configure something you’re not using. You can add them back later using the same installer files (not add/remove programs because this throws an error – just use the original installer file).

This is a next, next, next process and also very low risk. Great job by the installer team.

If you have SiteEdit code in your templates, first install and register SiteEdit extension DLL.   Then add the Extension to the Tridion MMC snap-in.

4. Test the CMS

Login to the CMS and you will see a new GUI Screen and a progress indicator. Be patient – the new Tridion GUI takes longer to load on the first time – but after it is about 20-30% faster on the same hardware. Sweet! 🙂

Things to test:

– Opening and saving Components. Do you use the Event System?  See below for tips on the Event System.

– Previewing. Do you use SiteEdit? You must re-register the SiteEdit DLL in the Tridion MMC SnapIn.

– Creating a new Component and new Page.

– Custom pages – The Tridion 2011 TOM API is fully supported and backwards compatible. These custom pages should just work. However, many of the original Powertools will not work because they re-used js from the old Tridion GUI. A new Powertools initiative has been started and a Page Publisher tool is already finished. Please join the fun and help us make the 2011 Powertools better.

– Publishing – not yet! Wait until the next step.

5. Installing the Broker and Deployer

There is not a nice installer here and it is a manual copy / paste action, especially if you’re using a Java based Content Delivery system. There are a lot of new 3rd party jar files and yes, you need them all.

– Add the SQL Server jar from Microsoft if using SQL Server. Please note there are different jar files for Java versions. Java 5 requires sqljdbc.jar and Java 6 requries sqljdbc4.jar. Tridion documentation for Content Delivery has more details.

– Create a cd_storage_conf file – The cd_broker_conf file is deprecated and replaced with a new cd_storage_conf. Grab the example one from the install folder, Tridion 2011 SP1\Content Delivery\resources\configurations, edit the connection string to the DB, and define the ItemTypes mapping.

– Update the logging config – Another new item here is the logback logger used. It has its own config file and has extensive documentation. This is one of many examples where Tridion took great, existing frameworks and put them under the new Tridion 2011 architecture – great job.

6. Test the Deployer

– Publish a Page with only a Page Template producing static HTML and no Component Presentations. This tests the basic ability to publish to the Filesystem. Try to view the published page from the website after. Works – yay! Doesn’t work – double check your deployer storage_config.

– Publish a Page with Component Presentations. This will add link data to the Broker and insert records in a DB or write new files on the filesystem, depending on your bindings in the config.

– Publish a dynamic Component Presentation to the Broker DB. This tests your Broker DB connection. If it does not work, go review the cd_storage_conf.

7. Test the Broker

The broker API is 100% improved and still is fully backwards compatible. All my 5.3 broker calls worked perfectly.  If you’ve written your own SQL against the broker db you should test it well.

– View one of your existing pages that queries the Broker. If you do not have any yet, you can see the Tridion Content Broker Query documentation or my JSP example for some inspiration.

– Configure cache channel support

– Load test all your pages using Broker Queries.  They’ve re-written the Broker and you want to confirm all performs as well as before.

Stop and congratulate yourself for performing a successful upgrade. However, we’re not yet finished since you’ve likely developed some custom code in custom pages, event system, or gui extensions that also needs to be reviewed and tested.

Now we know we can publish our site and our thousands of lines of templates work fine.

8. Custom Pages and GUI Customizations

If you wrote your own custom pages using the Tridion API there is a very good chance this works 100%.  For me I had around 20 custom pages and all worked perfectly.  For asp.net solutions you’ll want to update them to use the new Tridion 2011 dlls in the client folder.  Tridion TOM is 100% supported in the 2011 but has a deprecated status.  Our custom pages should work 100% unless the Tridion ASP or JS GUI files are required (most times not, except in cases like Powertools).

We’ve been warned not to change the existing Tridion GUI asp and js files and the warning was for times like this – when we upgrade and lose those very handy little icons in the GUI.  This is the tricky area where someone modified Tridion GUI js or asp files.  I would re-evaluate each customization and think if you really must have it, and if so if you could rewrite it using a Tridion 2011 GUI extension.

I have written a few articles to help you get started with 2011 GUI extensions.  Fear not – the Tridion R&D team has provided us a great new GUI Architecture that is more open and allows us to legally extend the GUI in many supported ways. 🙂 I have written a tutorial on creating your first GUI Extension and another about getting a quick start adapting the GUI Extension tutorial code for a new extension. The key here is expectations setting and planning. Do you really use all those extensions every day? Can the editors live without some of them while they’re being re-written in the new framework? Can you write an ASP custom page now in your old version (or also 2011) that does the same thing until the new shiny extension is ready?

9. Event System

Open the Cms config mmc, events section, what has a 1 is turned on.  For each of these it is a good idea to test it.  There can be complex logic, so take your time with this step.  Also you will need to configure the Cms to use your legacy event system.  Tridion re-wrote the event system for 2011 and I have a small article here about getting started.  But you can also keep running your old code.

– Tridion 2011 supports the old Event System and also provides a completely new framework for building a new one. The new Event System is really nice and the Tridion 2011 Delta Training is a good place to start learning more about it.

– Read about the old Event System support here.

– Use the Legacy Events Adapter for your old Event System. It is highly recommended to re-write the old Events to the Tridion 2011 Event System, but it is not mandatory before using Tridion 2011. This is something to be planned with the development team.

– You can also write a small script that resaves all components to trigger the oncomponentsave event, or to trigger other events.  This is a good idea in general as a way to test Event System functionality.

10. Templates

– All VBScript templates are 100% supported.

– SiteEdit?  I use SiteEdit and needed to register the SiteEdit dll using RegAsm (for SiteEdit 1.3) and also add it to the MMC snapin.

– Upgrade your templates to use the new Razor Mediator. It is very fast to write templates with Razor syntax, it is similar to VBScript but a lot more powerful, and much easier to learn than the DWT mediator or the XSLT mediator.  This assumes you know how to create a Compound Component Template.

Get the Razor Mediator

VBScript to Razor Guide

Razor introduction article

Summary

Upgrading the Tridion system is much easier with the new Tridion 2011 tools and support. The community is more active than ever and there are many nice Tridion 2011 extensions available from Tridion World.  In my experience the upgrade was a lot easier than previous upgrades – a real surprise when I think they replaced or upgraded a lot of the technologies under the platform.  Congrats to the installer and R & D teams!  We also have great new frameworks available in the new version, such as .NET 4.0, Solr, Logback, WCF, etc. With a sensible plan and step by step testing of various components we can perform the upgrade with ease and confidence. I hope this article gives you some hope that the upgrade is within reach and with some careful planning can be achieved with little risk.