Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

SharePoint Customization Tricks - Part 3

Rate me:
Please Sign up or sign in to vote.
4.20/5 (4 votes)
31 Jan 2009CPOL2 min read 50.7K   117   20   18
Trick #4: Renaming the list form toolbar items!

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

trick4_be4.JPG

After

trick4_after.JPG

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","");.

JavaScript
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?

trick4_remove.JPG

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Egypt Egypt
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.

Comments and Discussions

 
QuestionJS Hack Pin
dwatkins@dirq.net18-Mar-09 2:51
dwatkins@dirq.net18-Mar-09 2:51 
AnswerRe: JS Hack Pin
Ayman M. El-Hattab4-Apr-09 12:42
Ayman M. El-Hattab4-Apr-09 12:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.