Introduction
This multipart series of articles is intended to help you getting ramped up with SharePoint Customization. It's about modifying the default SharePoint user experience, list forms customization, branding, skinning SharePoint portals, etc.
In Part I, I introduced a generic function that you can use to hide the list view toolbar menu items (e.g. New Item, Upload, Edit in Grid view, etc.). In Part II, I showed you how to remove items from the list form toolbar. If you haven't read both posts yet, I would encourage you do to that first .
After posting the previous articles, I received a lot of e-mails from SharePointers asking how to rename the items in the list form toolbar. That's why I decided to write Part 3 in the series. After I finished writing the article and taking some snapshots, another SharePointer asked me on MSDN Forums if it's possible to remove the Text while retaining the images, for instance, removing "Delete Item" while retaining the (X) rendered beside it. Today I'll show you to do both tasks by JavaScript.
Trick #4 : Renaming List Form Toolbar Items!
Sometimes, you need to rename some items in the toolbar rendered at the top of DispForm.aspx to match the List Name. For instance, you have a custom list named "Programs" that stores the courses offered by a university. It would be better to have "New Program" rather than the default "New Item" and "Edit Program" rather than "Edit Item". Sometimes, you just need to totally delete the text and just leave the images with a tooltip that explains the action performed on clicking them.
Before :
![]()
After :
![]()
The following function can be used to achieve both tasks, just call the function passing the old and new names of the item. For instance if you need to rename "Add Item" to "Add Program", use renameFormMenuItems("Add Item","Add Program");. In case you need to remove the text and leave the image, call the function passing an empty string as the new name as follows: renameFormMenuItems("Delete Item","");.
renameFormMenuItems("New Item","New Program");
renameFormMenuItems("Edit Item","Edit Program");
renameFormMenuItems("Delete Item","");
function renameFormMenuItems(oldName,newName)
{
var anchorTag;
var allAnchorTags = document.getElementsByTagName('a');
if(oldName.length!=0)
{
for (var j = 0; j < allAnchorTags.length; j++)
{
anchorTag= allAnchorTags[j];
if (anchorTag.innerText.indexOf(oldName)!=-1)
{
anchorTag.innerText=newName;
try
{
if(newName.length!=0)
{
anchorTag.parentNode.previousSibling.firstChild.
firstChild.alt=newName;
}
else
{
anchorTag.parentNode.previousSibling.firstChild.
firstChild.alt=oldName;
}
}
catch(err)
{
}
}
}
}
}
Kindly note that the function is case sensitive so take care of the case the toolbar item names are rendered.
Nice and easy, isn't it?
Now a question is imposing itself, how can we use this function? The answer is the content editor web part; please refer to trick #3 in the previous article for more info.
Now what about hiding the toolbar altogether?
There are a lot of solutions that imply unghosting the pages from SharePoint Designer but I don't prefer them! Again, the solution is JavaScript, I've included in the zip file two functions one for renaming the toolbar items and the other for hiding the toolbar altogether! I'll be waiting for your feedback.