Friday, February 15, 2008

MSCRM 4.0 Client: Hiding Buttons by ‘title’ Attribute

To hide a button in MSCRM 4.0 by the button title attribute:

var list = document.getElementsByTagName("LI");
var i = 0;

while (i < list.length) 
{
    if (list[i].getAttribute('title') == 'Save and Close') 
    {
        list[i].innerHTML='<SPAN><SPAN><SPAN><SPAN></SPAN></SPAN></SPAN></SPAN>';
    }
    i = i + 1;
}

Basically the button HTML will be as below (the button outerHTML property):
<LI class=ms-crm-Menu id=_MBcrmFormSaveAndClose title="Save and 
Close" onclick=window.execScript(action) tabIndex=-1 action="crmForm.SaveAndClose();"><SPAN 
class=ms-crm-Menu-Label><A class=ms-crm-Menu-Label onclick="return false;" 
tabIndex=-1 href="javascript:onclick();" target=_self><IMG class=ms-crm-Menu-ButtonFirst 
tabIndex=-1 alt="Save and Close" src="/_imgs/ico/16_saveClose.gif"><SPAN 
class=ms-crm-MenuItem-TextRTL tabIndex=0>Save and Close</SPAN></A></SPAN>

So, in order to hide the button, the tags can be replaced by:

    list[i].innerHTML='<SPAN><SPAN><SPAN><SPAN></SPAN></SPAN></SPAN></SPAN>';

If the button required to be shown again later (e.g. based on certain condition to show/hide), the HTML can be stored into a variable before replacing the tags with the codes shown above, for example:

    crmForm.CUST_SaveAndCloseHTML = list[i].innerHTML;
    list[i].innerHTML='<SPAN><SPAN><SPAN><SPAN></SPAN></SPAN></SPAN></SPAN>';

So, in order to show the button:
list[i].innerHTML = crmForm.CUST_SaveAndCloseHTML;

A function can be created to show/hide buttons (the function has been attached to the crmForm, so that it can be invoked by events triggered by any form element):

// show: bool. Show = true, Hide = false
// title: string. Button Title
// tags: string. Object to stored the HTML tags
// return value: HTML removed HTML tags (for hiding the button)
crmForm.ShowButton = function(show, title, tags)
{
    var returnValue = null;
    var list = document.getElementsByTagName("LI");
    var i = 0;
    
    // Show Button
    if (show) 
    {
        // Ensure the HTML tags for showing button is available 
        if (tags != null) 
        {
            while (i < list.length) 
            {
                if (list[i].getAttribute('title') == title) 
                {
                    // Restore HTML tags for showing button
                    list[i].innerHTML = tags;
                }
                i = i + 1;
            }
        }
    }
    // Hide Button
    else
    {
        while (i < list.length) 
        {
            if (list[i].getAttribute('title') == title) 
            {
                // Return the HTML tags has been removed for hiding 
                // the button so that it can be used to restore when 
                // showing the button
                returnValue = list[i].innerHTML;
                // Hide button
                list[i].innerHTML='<SPAN><SPAN><SPAN><SPAN></SPAN></SPAN></SPAN></SPAN>';
            }
            i = i + 1;
        }
    }

    return returnValue;
}

To call the function to hide a button (the return value has been stored into a property attached to crmForm, so that it can used again to restored the button for showing):

    crmForm.SaveAndCloseButtonTags = crmForm.ShowButton(false, 
            'Save and Close', crmForm.SaveAndCloseButtonTags);

To show the button (again, the return value has been stored into a property attached to crmForm):

    crmForm.SaveAndCloseButtonTags = crmForm.ShowButton(true, 
            'Save and Close', crmForm.SaveAndCloseButtonTags);

If the button need to be removed completely (instead of hiding which can be made visible again later), the hiding action should replace the outerHTML instead of innerHTML with 4 empty <SPAN> tags:

    list[i].outerHTML='<SPAN><SPAN><SPAN><SPAN></SPAN></SPAN></SPAN></SPAN>';