SharePoint 2010: Change the “Add New Item” (and other) messages for a web part

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:

Where should you add the code?

Find the “<asp:content” tag for PlaceHolderMain and then find the matching end tag (“</asp:content>”)

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.

Create a text file with the JavaScript code and upload to a library

In the library right-click the file, click Properties and copy the URL of the file

Add an Content Editor Web Part (CEWP) below the web part you want to customize

From the CEWP click web part’s dropdown arrow and click Edit Web Part

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:

38 comments:

Great post - I'm trying to accomplish the opposite. I am working with very long lists and our users are in need of the "Add New" option at the top of the list. I'm new to the collection sites and group that I'm working with so while gathering requirements, I'm finding longer and longer lists that are all set to the default view.

Is there an easy way to customize the list web part and add an additional (or move the existing) "Add New" item option to the top of the list to avoid users having to scroll to the bottom? Any direction to this information is VERY appreciated :) Thank you for a great article!

Hi, although this looked very promising, no matter what I did, it did not work for me. I used a content editor web part exactly as you instruct on a web part page with a web part of a document library and it did not change the text.

Hi,thanks for an excellent article, providing a more robust solution than others.However, if you insert this code in a list view, the tab giving access to the list settings dissapears and you can no longer edit the list. Somehow this code intefers with the OOB JavaScript on the page.

The code does not interfere with the ribbon when added to a non-View page. What you are describing is common to view pages, and according to Microsoft, is "by design". If you add a web part to a view page, MS no longer considers it to be a view and hides view related features. You can still edit the list by first clicking any item in the list. That will wake up the ribbon.

You can work around this problem by editing the view page in SharePoint Designer and adding the code just before the end tag () of the PlaceHolderMain tag.

Is there a way to replace/change the graphic icon before the 'Add new Item" - tried to look for a css but except the A.ms-addnew which controls the text itself, I cannot find a way to change the icon. thx all for your help.

Thank you so much for posting these intructions - this is exactly what we wanted to accomplish. To make it work, I had to add the actual java script to the CWEP in addition to the content link. Any idea why?

Hey Guess Im getting the same problem as Sal.When I run this script - javascript:alert( document.getElementById("idHomePageNewAnnouncement") )it does return null. How exactly do I find the Id of "Add Document" in sharepoint 2010?

Hi Mike - thank you so much for this post, it was incredibly helpful and allowed me to move the "Add new discussion" to the top of the webpart. My team will be happy that they don't have to scroll all the way down!

I do have one question - when I click the new "Add new discussion" link, it takes me to a new page to enter my post. Is it possible to keep the original functionality of the form opening directly on the page?

<a href="https://microsmithinc.sharepoint.com/sites/training/_layouts/listform.aspx?PageType=8&ListId={CB24DD78-DE7F-427D-87AC-6F9692CDECCD}&RootFolder="> Click here to add a new item </a>

If you want to who can click the link you will need add a SharePoint Security Trimmed Control. But... server controls will not work in a CEWP. You will need edit the page that holds the web part. It would look something like this:

Hi, sorry for digging this 'old' topic. I got a problem on the 'Add new discussion' link. When I clicked on the link, filled in the popup window, then clicked 'Save'. Nothing happened at all. No new topic was added to the discussion board. But the button 'New item' on the left top of the screen worked fine. I have to add new topics through that button in an inconvenient way for now. Do you have any ideas on what's wrong with my site?

I was wondering how to add a querystring to the "Add new item" linl URL. I am using sublists and want to pass the ID of the parent list to the new sublist record being created. Any idea how to do this?

Great post. I did have a question. I do see that this covers text change for the main page ("idHomePageNewDocument"), how can we apply this change to the text in Document Libraries? What is the id for document libraries?