Change column widths in GUI

Question

This is a follow-up to my question about usability in Tridion 2011 / 2013.

The problem that our CM users have is that they always need to resize the columns in the list view (because of lengthy titles), as well as resize the navigation tree view (on the left side of the GUI). The GUI does not remember this, so they need to do this every time they have to select a component to insert into a page.

I don't have much experience in the noble art of GUI extensions. Would it be possible to write a GUI extension that would cause the GUI to remember the column widths and/or the width of the navigation tree view? If so, how?

Answer 1

I've done some research (and quick implementation) and this is what you'll need (Download Link Below):

1. Copy and unzip the sample somewhere in the (tridion) server.
2. Register The UI Extension (TRIDION_HOME\web\WebUI\WebRoot\Configuration\System.conifg), remember it only consists of a model.

<model name="CWE" xmlns="http://www.sdltridion.com/2009/GUI/Configuration">
  <installpath xmlns="http://www.sdltridion.com/2009/GUI/Configuration">PATH?TO?YOUR_UNZIPPED_LOCATION\CW.Model\</installpath>
  <configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration">Configuration\model.config</configuration>
  <vdir xmlns="http://www.sdltridion.com/2009/GUI/Configuration">CWE</vdir>
</model>

1. Clear your cache and reload the CME.

I have created a sample "Model" that contains a javascript which is hooked to the "draw" event of the List. So whenever the list is drawn, it resets the "Title" column width.

This is the code with some explanations:

//Increase the default width by # of pixels, in this case 50
var cw_increaseWidth = 50;
var cw_ListPage;
var cw_ItemsList;


//TO DISABLE THIS EXTENSION, JUST COMMENT OUT THIS LINE
$evt.addEventHandler($display, "start", onDisplayStarted$ColumnWidth);

// This callback is called when any view has finished loading
function onDisplayStarted$ColumnWidth() {
    $evt.removeEventHandler($display, "start", onDisplayStarted$ColumnWidth);
    var toolbar = $display.getView().properties.controls.toolbar;
    cw_ListPage = toolbar.getPage("DashboardPage");
    //Initialize the DragAndDropUploader after the frame has loaded
    $evt.addEventHandler(cw_ListPage, "frameloaded", cw$onPageReady);
    $list = cw_ItemsList;

};

// This callback is called when the frame containing the list is finished loading
function cw$onPageReady() {    
    $evt.removeEventHandler(cw_ListPage, "frameloaded", cw$onPageReady);
    cw_ItemsList = $controls.getControl($("#FilteredItemsList"), "Tridion.Controls.List");
    $evt.addEventHandler(cw_ItemsList, "draw", cw$setWidth);
};


//This callback is called when the list is drawn, i.e. the columns become available
//The code below is a replica of what anguilla does when you resize a column, only difference is that 
//diffX = Set to the 'increase' value on the top of this document (cw_increaseWidth)
function cw$setWidth(e) {    
    $evt.removeEventHandler(cw_ItemsList, "draw", cw$setWidth);
    var p = cw_ItemsList.properties;
    var cols = p.definition.getColumns();    

    //The Column "Name" is always the second (1 in a 0-index based array)
    var resizeIndex = 1;    

    if (resizeIndex < cols.length - 1) {

        //This is how many pixels wider you want it
        var diffX = cw_increaseWidth;        
        var leftCol = cols[resizeIndex];
        var rightCol = cols[resizeIndex + 1];

        if (diffX > 0) {
            var maxDiff = Math.max(0, rightCol.getOuterWidth() - rightCol.getMinWidth());
            if (maxDiff > 0 && diffX > maxDiff) {
                diffX = maxDiff - 1;
            }
        }
        else if (diffX < 0) {
            var maxDiff = Math.min(0, -leftCol.getOuterWidth() + leftCol.getMinWidth());
            if (maxDiff < 0 && diffX < maxDiff) {
                diffX = maxDiff + 1;
            }
        }

        if (diffX) {
            leftCol.setOuterWidth(leftCol.getOuterWidth() + diffX);
            rightCol.setOuterWidth(rightCol.getOuterWidth() - diffX);
            // Invalidate original width
            leftCol.setDefinedWidth(null);
            rightCol.setDefinedWidth(null);
        }
    }

    cw_ItemsList._initializeDimensions(true);
    p.resizeEngaged = false;
    p.resized = true;

};

Let me know if you need further help on setting this thing up.

Download Sample Code