The Tridion 2011 GUI contains HTML ID attributes for many elements and lets our GUI Extension JavaScript to hook into these elements to hide, show, or manipulate their appearance. I use a wide-screen monitor and prefer to re-size my tree window pane when I’m doing lots of navigation in the Tridion tree. In this article I will show how a simple JavaScript GUI extension can re-size the tree navigation pane with one keystroke.

Making the tree pane wider

I found myself resizing the Tridion tree every time I used the GUI and decided to make a small shortcut that could set it to my desired width using 1 keystroke. With some research I found the ID tag for the Navigation Tree and was easily able to set the width using a JavaScript GUI Extension. Of course, if we know the ID of the element we can get it and perform other actions as well – such as hiding it or adding extra info to the GUI beside it. As with all GUI Extensions this requires the utmost care and consideration and should not be attempted at home without parental supervision. Using a shortcut hotkey to trigger the JavaScript call makes it less invasive than re-writing the GUI behavior by default.

Re-sizing the tree pane is accomplished with this bit of JavaScript to modify the width attribute:

$j('#NavigationPanel').width('350');

The $j maps to jQuery. At the end of my jQuery min js file I add:

window.$j = jQuery.noConflict(true);

This is needed since Tridion internally uses $ and from Jaime’s recent post it also uses $$. Interesting.

Enabling with shortcuts

To implement this tweak I put them in a JavaScript file that is loaded into Tridion using a GUI Extension. Not just any GUI Extension, however, but the Shortcut keys extension I wrote about earlier that allow us to define our own Shortcut key combination and execute JavaScript. This allows us to toggle when we want to activate these settings – since maybe other users like the default settings. You could also have multiple settings and use different hotkeys to enable them.

shortcuts.js

//If you only want your code to affect certain screens/views, you should listen to Anguilla events like this:
$evt.addEventHandler($display, "start", onDisplayStarted);

// This callback is called when any view has finished loading
function onDisplayStarted() {

	// Open Publish Queue dialog
	Mousetrap.bind('q', function() {
			//var popup = $popup.create($cme.Popups.PUBLISH_QUEUE.URL, $cme.Popups.PUBLISH_QUEUE.FEATURES);
			//popup.open();
			$commands.executeCommand('PublishingQueue')
	});

	Mousetrap.bind('w', function() {
		// make tree pane wider - must click mouse in the ribbon or breadcrumb area before activating
		// - will not work if focus is in tree or content pane
		$j('#NavigationPanel').width('350');
	});

    $evt.removeEventHandler($display, "start", onDisplayStarted);
}

Testing

Place the focus of your cursor to the breadcrumbs pane or the ribbon pane and make sure nothing is selected.  Then press the hotkey ‘w’ and witness the tree menu width being reset to your dimensions in the shortcuts.js file.  The mousetrap library does not enable shortcuts if any element is selected on the screen.  You could, of course, move the jQuery call to modify the width outside the shortcuts key, but then it would always be enabled for all users.

Installing

1. Create Folder for Extension: C:\Program Files\Tridion\web\WebUI\Editors\Shortcuts
2. Add the Shortcuts.config file to the folder Shortcuts
3. In Shortcuts create a js folder. Path is: C:\Program Files\Tridion\web\WebUI\Editors\Shortcuts\js
4. Copy 3 javascript files to the js folder.
5. – mousetrap.js – javascript shortcut library
6. – shortcuts.js – our Tridion GUI Extension shortcuts actions
7. – jquery-1.7.2.min.js – jQuery library with the j$ noConflict specified
8. Open IIS and create a Virtual Dir at SDL Tridion 2011/WebUI/Editors/Shortcuts. Point the home dir to the Editors\Shortcuts dir
9. Open the GUI Configuration,   C:\Program Files\Tridion\web\WebUI\WebRoot\Configuration, and add the new GUI Extension.

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

Code here:
https://github.com/rcurlette/TridionBrowserDefaults