Apr 16, 2012

Hide default toolbar items and separator

It is usually required to hide some of the default tool bar items appear under each entity depending on the requirement. “Look Up Address...” is one such item. Quote or Order like entities got Recalculation button by default and etc.

In those cases, we know how to hide them by identify those tags with their tooltips (titles) in UI. For example below code will hide Print button of the quote. See how we got it from its title. This is something we know.

//print button
    var lis1 = document.getElementsByTagName('LI');
    var j = 0;
    while (j < lis1.length)
    {
        if (lis1[j].getAttribute('title') == 'Print Quote for Customer')
        { lis1[j].outerHTML = '<SPAN> <SPAN> <SPAN> <SPAN> </SPAN> </SPAN> </SPAN> </SPAN>'; }
        j = j + 1;
    }

Anyway, if you do above exercise for few buttons, you will notice that separator symbol (i.e. |) is still appearing there and it could create some messy look as below.


In this case, there is another script to hide them too. Below is the script for that. This hides all the separators. I think that’s better than keeping untidy separators in the tool bar.

//seperator
    var lis2 = document.getElementsByTagName('img');
    var k = 0;
    while (k < lis2.length)
    {
        if (lis2[k].getAttribute('id') == 'mnu_hSpacerGrid')
        { lis2[k].outerHTML = '<SPAN> <SPAN> <SPAN> <SPAN> </SPAN> </SPAN> </SPAN> </SPAN>'; }
        k = k + 1;
    }