Controlling Tabs and Sections with JScript in Microsoft Dynamics CRM 2011

The options for managing Microsoft Dynamics CRM forms dynamically has increased tremendously in CRM 2011 – we can now, more than ever, tailor the look of a form to the specific type of record displayed.

Here are 2 functions I use to manage the form at runtime to show or hide sections or tabs based on data in the form.

The first function, “toggleTabDisplayState” hides or shows a tab and can show it collapsed or expanded. Call the function by passing in the ‘name’ of the tab, desired ‘display state’ [either “expanded” or “collapsed”] and whether the tab should be visible [ true or false ].

The second function, “toggleSectionDisplayState” hides or shows a section by setting its isVisible attribute to [ true or false ].

In this Example, I’ve named the “Prospect” tab: “tabProspect” in the form configuration - and based on whether a (previously set) variable “typeProspect” is true or not, I want to hide or show this tab – and when it’s displayed, I want it expanded. – I also want to hide/show the Customer tab based on whether the record is for a prospect or not. 

// If the 'Prospect type' == true, 
// then Show and expand the Prospect tab and hide the Customer section
// Otherwise, 
// Show the Customer Section and hide the Prospect Tab
if (typeProspect == true) {
    toggleTabDisplayState("tabProspect", "expanded", true);
    toggleTabDisplayState("sectionCustomer", false);

}
else {
    toggleTabDisplayState("tabProspect", "collapsed", false);
    toggleTabDisplayState("sectionCustomer", true);
}

function toggleTabDisplayState(tabName, tabDisplayState, tabIsVisible) {
    //Hide/Show and/or Expand/Collapse tabs 
    var tabs = Xrm.Page.ui.tabs.get();
    for (var i in tabs) {
        var tab = tabs[i];
        if (tab.getName() == tabName) {
            tab.setVisible(tabIsVisible);
            tab.setDisplayState(tabDisplayState);
        }
    }
}

function toggleSectionDisplayState(sectionName, sectionIsVisible) {
    //Hide or Show Sections 
    var tabs = Xrm.Page.ui.tabs.get();
    for (var i in tabs) {
        var tab = tabs[i];
        tab.sections.forEach(function (section, index) {
            if (section.getName() == sectionName) {
                section.setVisible(sectionIsVisible);
            }
        });
    }
}

Post by: Scott Sewell, Customer Effective