SharePoint: Move the “Add New” Link to the Top of the Web Part

 

When you display a long list in a web part you will find that the “Add new” link is often out of sight at the bottom of the page. Your users will have to scroll to the find the link. This article takes a look at some JavaScript to change the order things are displayed in a web part.

 

The before and after:

 

Note: This has been tested on only one SharePoint 2010 installation, so use at your own risk and test, test and test.

 

Steps to make this change on only one page:

1. Open Notepad and paste in the JavaScript from below
    
2. Save the Notepad file with a name like "MoveAddNewItem.html"
    
3. Upload this Notepad file to a library such as "Site Assets", "Site Files" or other library
    
4. Go to that library, right-click this file and copy the Shortcut (the URL to the file)
    
    
5. Add a Content Editor Web Part below the last web part on the page, edit this web part, and paste the URL you just copied into the Content Link box.
   
    
6. Save your changes and test the result

 

Steps to make this change for all pages:

1. Using SharePoint Designer, edit your master page
2. Add the JavaScript below just before the </BODY> tag

 

The JavaScript

Notes:

• The Try Catch is to deal with the picture library and the calendar, which do not add the “add new” links
• If you are modifying the code, you will want to remove the Try Catch during your testing
• The test for "ms-bottompaging" is for long lists that are displaying a previous / next links
• The line that starts with “theTable = x” is one long line  ( theTable = x[i]…… )

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// techtrainingnotes.blogspot.com/2012/01/sharepoint-move-add-new-link-to-top-of.html
// Find all tables
var x = document.getElementsByTagName("TABLE"); 
var ListList = "";

for (var i=x.length-1; i>0; i-- ) 
{
  // find just the tables that are list web parts (have a "summary" element)
  if (x[i].summary)
  {
    try {
      // Now find the "add new" rows
      var theTable = x[i].parentNode.parentNode.parentNode.parentNode.nextSibling;
      // but if the table is the paging table (next / previous) then get the next table
      if (theTable.innerHTML.indexOf("ms-bottompaging") > 0)
      {
        theTable = x[i].parentNode.parentNode.parentNode.parentNode.nextSibling.nextSibling.nextSibling;
      }

      // hide the unneeded horizontal line
      theTable.rows[0].style.display="none";
      // hide the extra blank space
      theTable.rows[2].style.display="none";

      // move the table    
      var theContainer = x[i].parentNode.parentNode.parentNode.parentNode.parentNode;
      theContainer.parentNode.insertBefore(theTable,theContainer);
    }
    catch (err123) {}
  } 
}

</script>

 

.