Altering Page Elements with Javascript

Altering Page Elements with Javascript

I had an odd request from a client who wanted to change the label on the New Event on the Open Activities related list to "Plan a Sales Call". He also wanted to change the Log a Call button on the Activity History related list to "Log a Cold Call". His reasoning is that it would be valuable to understand the difference between a scheduled, planned sales call and an off-the-cuff cold call, and storing each in a separate object would enforce the distinction nicely. To reinforce this distinction, we would need to alter the standard buttons used to create new Tasks and Events on related lists:

Hmmm ...
I ended up adapting a solution from a post on Chirag Mehta's blog:

1. I created a plaintext file named change_buttons.js (leaving off the <script> tags:

window.onload = new function()
   { window.setTimeout(hideBtns, 100); }
function hideBtns()
{
   if (document.getElementsByName("new")[0] != null)
   {
      document.getElementsByName("new")[0].value = 
         "Log A Cold Call";
   }
   if (document.getElementsByName("event")[0] != null)
   {
      document.getElementsByName("event")[0].value = 
         "Plan A Sales Call";
   }
}

2. Then I uploaded this file as a Document to a shared, public folder (making a note what the ID for this record is).
3. Then I created a new HTML home page component, in this case named Change Buttons:

<script src="/servlet/servlet.FileDownload?file=[your ID goes here]">
</script>

4. Then I added the Change Buttons home page component to home page layouts, on the left-hand (narrow) side, as appropriate. (Obviously, you could have different behavior for different home page layouts, which each is assigned to a different profile.)

Here's the result:

This works by adding this snippet of Javascript to each page as part of the sidebar. Of course, this only works the sidebar is visible on each page.
As Chirag's post explains, you can use this same technique to hide page elements, too. All you have to do is figure out what the name of the element is and you can address it directly. If for some reason you wanted to hide the New Event button instead of change its label, you would alter the script above like this:

   if (document.getElementsByName("event")[0] != null)
   {
      document.getElementsByName("event")[0].style.display = 
         "none";
   }