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 1, 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 2, 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 (http://www.ayman-elhattab.blogspot.com).
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.
Let's get started!
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 "New Item" will work while "nEw iTeM" is not gonna work.
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 information.
What about hiding the toolbar altogether?
There are a lot of solutions that imply unghosting the page using SharePoint Designer, but I don't prefer those solutions! Again, let's perform this task using JavaScript. I've included two functions in the zip file, one for renaming the toolbar items and the other for hiding the toolbar altogether! Waiting for your feedback.
History
- 31st January, 2009: Initial post
Ayman El-Hattab is a Regional Technology Solution Professional focusing on helping software professionals and organizations build better SharePoint Solutions using Microsoft Application Lifecycle Management (ALM) technologies and tools. Ayman has been in this role since 2010 and has presented at many conferences all over the Middle East & Africa about ALM, SharePoint, C#, asp.net and Business Intelligence technologies. Ayman is also a Microsoft Most Valuable Professional [SharePoint MVP] , ALM Ranger, published author and an enthusiastic speaker who enjoys working with the online and offline developer communities all over the world. Ayman is the founder of MEA ALM Community & SharePoint4Arabs, community lead at Egypt SharePoint User Group and an organizer of several SharePoint Saturday events. Outside of work, Ayman can be found watching soccer games, playing xbox or watching documentary movies.