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 = '<img alt="Expanded, click to collapse" src="/_imgs/navup.gif" style="cursor:hand;"/>' + 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();
I hope you find it useful, please leave a comment to let me know :o)
#1 Scott // 10.24.2009 at 5:52 PM
Nice! looking forward to trying this outQ
#2 Ersin Öztürk // 11.13.2009 at 8:37 PM
Very cool :) Thaks for share.
#3 Adrian // 11.18.2009 at 5:46 PM
Very nice! Two comments:
1) The mouse-over text always says 'Expanded, click to collapse' whichever context which is misleading, so I changed it to 'Click to expand\collapse'
2) How can I collapse all sections by default when the form opens?
#4 Marco Amoedo // 11.21.2009 at 1:34 PM
Thanks for the nice comments.
@Adrian
1) I forgot that one. You can add code to change the tooltip text on the ToggleVisibility method to include the correct message.
2) On the AttachCollapsableSection method. Right after attaching the OnClick event you can call the event so it collapses the section.