Controlling Tabs using JScript in Dynamics CRM 2011

Roshan Mehta, 05 March 2012

The CRM 2011 SDK provides a fully documented library for JScript functions to control form layout. Today we will see how to expand/collapse tabs on an entity form using JScript. Tabs have changed since previous versions of Dynamics CRM and are displayed down the page rather than across the top. Users can expand/collapse tabs at any time, but there are scenarios in which you would want to control this programmatically.

Here we can see three tabs: General, Details, and Notes. I have included a custom field called Expand Tab which will fire a Jscript function to control the behaviour of the Details tab. I have added an onchange event handler to the Expand Tab field which fires the following Jscript function:

var ROSHAN = {};

ROSHAN.expandCollapseTab = function () {
    var expand = Xrm.Page.getAttribute("mag_expandtab").getValue();
    if (expand) {
        Xrm.Page.ui.tabs.get("tab.details").setDisplayState("expanded");
    } else {
        Xrm.Page.ui.tabs.get("tab.details").setDisplayState("collapsed");
    }
}

The tab will be expanded/collapsed based on the value of the Expand Tab field. This functionality is useful in many scenarios, but is generally used to ease data entry for CRM users. If you have a custom entity with a lot of tabs, it is a good idea to collapse all tabs by default. You can add Jscript so that when a single tab is expanded by a user all other tabs are automatically collapsed. You could also automatically expand/collapse tabs when users tab through fields on the form.