Collapsable Form Sections – a bit of the future in CRM 4

On the last year PDC demos we saw that Dynamics CRM 5 will come with an improved and less clicky UI to enable an even better User Experience. One of the features on the videos was the change to have collapsable panels instead of tabs, this allows the users to access the information in a more convenient way. In this post I will try to get something of those future enhancements to work in CRM 4 with some JavaScript.

Recently one of AlfaPeople customers required to have something similar on their CRM implementation. The customer operates on the financial services sector and it required to have lots of information about the contacts available on the contact form. The result was an overcrowded form, so I decided to give it a try and create some JavaScript to make the sections of the form to collapse and expand in the same way as the left hand side navigation panel areas just for the shake of usability.

After some inspection of the CRM forms DOM using the Internet Explorer Developer toolbar (F12 in IE8), and some research I came with the following code that enables any section with a Title to have a collapse/expand button. See the video below.

The code is not complicated at all. It basically searches on the form on-load for all the sections titles on the form and injects a image with an on-click event next to the section title. When the image is clicked the on-click event handler will set to “none” the display property of all the rows of the section except for the tile one, or if the section was already collapsed will revert the display to get the expand effect.

function getElementsByCondition(condition, container) {
    container = container || document;
    var all = container.all || container.getElementsByTagName('*');
    var arr = [];
    for (var k = 0; k < all.length; k++) {
        var elm = all[k];
        if (condition(elm, k))
            arr[arr.length] = elm;
    }
    return arr;
}

function attachCollapsableToSections() {
    var sections = getElementsByCondition(function (elm) { if (elm.className.indexOf("ms-crm-Form-Section") != -1) return true; }, null);

    for (var i = 0; i < sections.length; i++) {

        sections[i].innerHTML = '' + sections[i].innerHTML;
        sections[i].childNodes[0].attachEvent('onclick', toggleVisibility);
    }

}

function toggleVisibility(e) {
    var sectionContainer = e.srcElement.parentNode.parentNode.parentNode;

    var elements = getElementsByCondition(function (elm) { if (elm.vAlign == "top") return true; }, sectionContainer);

    for (var i = 0; i < elements.length; i++) {
        if (elements[i].style.display == "none") {
            elements[i].style.display = "";            
            e.srcElement.src = e.srcElement.src.replace("navdown", "navup");
        }
        else {
            elements[i].style.display = "none";            
            e.srcElement.src = e.srcElement.src.replace("navup", "navdown"); 
        }
    }
}


attachCollapsableToSections();