Hiding Buttons using Client Side Code

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

Hiding Buttons using Client Side Code

  • Comments 1
  • Likes
The idea of hiding buttons has been discussed before on the blog as can be seen from this post:

Controlling Buttons using Client Side code

Recently there has been an exchange of emails within an internal Sage mail-group which has come up with some very good techniques. The material below has come from a very clever colleague in the Sydney office, so I am not taking credit.

Hiding a button in Sage CRM can be done as per the below example.

Need to firstly create a function to attach a function to the onload event

<SCRIPT>;
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
if (oldonload)
{
oldonload();
}
func();
}
}
}
</SCRIPT>

Next we need to determine a unique component of the href of the button we want to hide (this could be an action e.g 520 Company Summary report)

We then itterate through the document object model looking for an anchor with 520 in the href.
We then have the elementid and set the visibility property to hidden

We stick all of this code in a function called hideElement()

<script>
function hideElement()
{
for(i=0;i<document.all.length;i++)
{
if(document.all[i].tagName=='A')
{
if(document.all[i].href.search(/520/i)>-1)
{
document.all[i].style.visibility = hidden;
}
}
}
}
</SCRIPT>

We then add the function to the load event

<script>
addLoadEvent(function(){hideElement();});
</script>


Say you want to remove the New Appointment button from the Company Communication screen, using the code in the previous example and substituting the Action 520 for 362 (New Appointment Action) will do the trick but it will leave a space between the "New Task" button and the "New Email" button. How do you get rid of the space?

To get rid of the space you need to manipulate the table the buttons are sitting in using client side scripting. To manipulate a table client side you need to get hold of the TBODY element.

The TBODY element is a logical element that sits below the Table element in the Document Object Model.

The trouble with doing this in CRM is there is generally no way to uniquely identify 1 table from the next, so you need to do a little digging with your business logic.

IN CRM v6.0 each action button is embedded in the following HTML

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD>
<A CLASS=ButtonItem HREF="BlahBlahBlah &Act=362 &BlahBlahBlah">
<IMG src="/crm/img/Buttons/NewAppointment.gif" mce_src="/crm/img/Buttons/NewAppointment.gif" BORDER=0 ALIGN=MIDDLE></A>
</TD>
<TD> </TD>
<TD>
<A CLASS=ButtonItem HREF="BlahBlahBlah &Act=362 &BlahBlahBlah">New Appointment</A>
</TD>
</TR>
</TABLE>

This makes it pretty easy as each button is embedded in its own table - therefore all we need to do is find the offending table and blow away all the rows in it.

With that in mind we can do the following.....

1. Find the button using the existing code in the previous example.
if(document.all[i].href.search(/362/i)>-1)
{
//Once we find the button we do this action
}
2. Instead of making the button invisible - use the elementId of the Anchor tag as a base and then seach backwards through the Document Object Model for the previous TBODY element.
if(document.all[i].href.search(/362/i)>-1)
{for(t=i;t>0;t--)
{if(document.all[t].tagName=='TBODY')
{
//Once we find the TBODY we do this action
}
}
3. Once the TBODY element has been found - delete the rows of the table to remove the offending space.
if(document.all[i].href.search(/362/i)>-1)
{for(t=i;t>0;t--)
{if(document.all[t].tagName=='TBODY')
{while(document.all[t].rows.length >0)
{document.all[t].deleteRow(0);}
t=0;
}
}
}


The complete code looks something like this.


a. The addLoadEvent function remains the same

<script>
function addLoadEvent(func)
{var oldonload = window.onload;
if(typeof window.onload != 'function')
{window.onload = func;}
else
{window.onload = function()
{if(oldonload)
{oldonload();}
func();
}
}
}
</script>

b. The Script that calls the addLoadEvent Function remains the same

<script>
addLoadEvent(function() {hideElement();});
</script>

c. The script to hide the button now looks like this.

<script>
function hideElement()
{for(i=0;i<document.all.length;i++
{if(document.all[i].tagName=='A')
{if(document.all[i].href.search(/362/i)>-1)
{for(t=i;t>0;t--)
{if(document.all[t].tagName=='TBODY')
{while(document.all[t].rows.length >0)
{document.all[t].deleteRow(0);}
t=0;
}
}
}
}
}
}
</script>

Place the above script tags in the CommunicationFilterBox screen to see the code in action.
Comments
  • Hi Jeff,

    We are using the below code to hide the delete button in the library screen  on CRM 7.1 sp2 .   As suggested aboove simillar code used to work in previous versions including 7.1 sp1 .

    Tried adding this code in custom content of Global Library Item Box Long  and Library Web Picker . Is there any change in the script for 7.1 sp2 .

    <script>

    if (window.addEventListener)

    {

    window.addEventListener("load", hideButton, false)

    }

    else

    if (window.attachEvent)

    {

    window.attachEvent("onload", hideButton)

    }

    function hideButtons()

    {

    var arrayAs = document.getElementsByTagName("A");

    var strClick ="";

    for (var i=0; i<arrayAs.length; i++)

    {

    strClick = String(arrayAs[i].onclick);

    if (strClick.search(/Act=342/i)>-1)

    {

    arrayAs[i].style.visibility = hidden;

    }

    }

    }

    </script>

    Thanks