How to Rename or Change the “Add New Item” (and other) messages for a List

The Goal

To change from “Add new item”:

    

to “Click here to add team tasks”:

    

ID’s used by web parts

Each web part has a different ID and some share a common ID. You will need to modify the following code examples with the ID used by your list. Note that some lists share the same ID, like Tasks and KPIs.

Note: Many of these IDs have changed in 2010!

If the ID you need is not in this table, display the web page with the web part, use the browser’s View Page Source option and search for the message text. Then look backward in the <A> tag and find the ID.

Web Part	Default message	ID for “.getElementById” in the code below
Announcements	Add new announcement	“idHomePageNewAnnouncement” (changed in 2010)
Links	Add new link	"idHomePageNewLink"
Calendar	Add new event	"idHomePageNewEvent"
Picture Library	Add new picture	“idHomePageNewItem”  *  (changed in 2010)
KPI List	Add new item	"idHomePageNewItem"  *  (changed in 2010)
Tasks	Add new item	"idHomePageNewItem"  *  (changed in 2010)
Project Tasks	Add new item	"idHomePageNewItem"  *  (changed in 2010)
Document Library	Add new document	"idHomePageNewDocument"  (changed in 2010)
Wiki	Add new Wiki page	"idHomePageNewWikiPage"   (changed in 2010)
Discussion	Add new discussion	"idHomePageNewDiscussion"  (changed in 2010)
Custom List	Add new item	“idHomePageNewItem” *   (changed in 2010)

* = Shared with another list

If there is only one “Add new” message on a page

I.e. there is only one web part on the page that uses that ID then we can use this simple code:

<script>
  document.getElementById("idHomePageNewItem").innerHTML="your new text goes here"
</script> 

But the IDs won’t always work!

SharePoint can build pages with multiple elements with the same ID. This is not proper HTML, but, they do it…

So we will need something a little more complex:

<script>
var ttnA = document.getElementsByTagName('A');
for (var j=0; j<ttnA.length; j++)
{
  if (ttnA[j].id == 'idHomePageNewItem')
  {
    ttnA[j].innerHTML='your new text goes here'
  }
}
</script>

This code runs through all of the Anchor (<A>) tags in the page looking for the ones with the ID we need and then changes the text as needed.

What if you only wanted to change the second web part that uses that ID to a new message? Then try this:

<script>
var ttnA = document.getElementsByTagName('A');
var ttnCounter = 0;
for (var j=0; j<ttnA.length; j++)
{
  if (ttnA[j].id == 'idHomePageNewItem')
  {
    ttnCounter ++;
    if (ttnCounter == 2)
      { ttnA[j].innerHTML='your new text goes here' }
  }
}
</script>

Where should you add the code?

Add the code to the page using SharePoint Designer

1. Edit the page using SharePoint Designer
2. Find the “<asp:content” tag for PlaceHolderMain and then find the matching end tag (“</asp:content>”)
3. Just before the end tag, add the JavaScript listed above

Or add a Content Editor Web Part to the page

This is the easiest for testing, and does not require SharePoint Designer. In SharePoint 2007 this worked equally well for web part pages and View pages. In SharePoint 2010, adding a web part to a View page causes the View selector dropdown to be hidden, so the SharePoint Designer approach might be better for View pages. The CEWP works just fine for web part pages and the new “wiki style” home pages. The only got’ya is that they have removed the Source Editor button from the CEWP. If you use the Edit HTML button in the Ribbon you may find that your HTML and JavaScript gets modified by their editor. Best practice with the 2010 CEWP is to store your HTML and JavaScript in a text file in a library and then use the CEWP’s link to a file option.

1. Create a text file with the JavaScript code and upload to a library
2. In the library right-click the file, click Properties and copy the URL of the file
3. Add an Content Editor Web Part (CEWP) below the web part you want to customize
4. From the CEWP click web part’s dropdown arrow and click Edit Web Part
5. Paste the URL you copied into the Content Link box

Hide the “+” image?

If you want to get rid of the little icon just before the “New Item” text then just add one more line of code after where you change the message:

     ttnA[j].innerHTML='Click here to add team tasks';
     ttnA[j].previousSibling.previousSibling.style.display='none';

     

Hide the entire message?

No tricks needed!  Just edit the web part and change the “Toolbar Type” to “No Toolbar”. (The “New” link we’ve been working with is the “Summary Toolbar”.)