Geeks With Blogs

News Cloud development with Azure, Visual Studio and SharePoint Online!
Thorvald Bøe
If you have a custom list in SharePoint, you may want to add a "Add new item" button for this list on a different page, e.g if you have a dashboard/summary/overview type of page that provides various key information, but not the list itself.

I had this need on a page that displayed various information using the content editor web part and jQuery. This has been my standard approach for customization lately, and if you are not familiar with the technique, you can find lots of resources on the internet. Basically, the content editor web part lets you link to a html or js file to provide almost any type of html/javascript content, and in combination with jQuery and SharePoints REST api, it is very powerful indeed.

Anyway, I needed to put an "Add new item" button for an employee list on the site home page. It was actually quite simple:
1.I used IE developer tools (press F12) to view the source of the page displaying the employee list
2.I located the existing new button and copied the html
3.I pasted the html on the front page

Now it was time for testing. And it actually worked, right out of the box, kinda. But there was one hickup: Clicking the new button took me to the new form, but after pressing save or cancel, I was brought to the list, not the home page where I started. So I did some digging and found that by adding a "Source" parameter to the url, I could return nicely to the home page. The code looked like this:

<div id="newEmployeeDiv">
<a title="Add new employee to the database." class="ms-heroCommandLink" id="idHomePageNewItem" href="/empdb/_layouts/15/listform.aspx?PageType=8&amp;ListId=%7b3469E3B4-6AD8-444F-9AEB-10C5257A6690%7d&amp;Source=https%3A%2F%2Fmycompany%2Esharepoint%2Ecom%2Fempdb%2FSitePages%2FHomepage%2Easpx" unselectable="on" data-viewctr="1">
<span class="ms-list-addnew-imgSpan16" unselectable="on">
<img class="ms-list-addnew-img16" id="idHomePageNewItem-img" alt="" src="/_catalogs/theme/Themed/DBB599EF/spcommon-B35BB0A9.themedpng?ctag=2" unselectable="on"></span>
<span unselectable="on">Add new employee</span></a>

Note the highlighted areas:
1.The list id points to the list you are targeting
2.The source parameter contains the url to the page you want to return to

Also note that by default, if you just copy the html code from an existing new button, you get a RootFolder parameter with an empty value as part of the url. I had to remove the RootFolder parameter in order to make it work.

Other than that, it worked like a charm!

Posted on Wednesday, February 5, 2014 3:24 PM | Back to top

Comments on this post: Add a "new" button to a page in SharePoint

# re: Add a "new" button to a page in SharePoint
Requesting Gravatar...
This is great and very useful - expect that when I use it - the text in the Add button is formatted like a link (so the text is underlined and blue) not the same as the Add button at the bottom of the page

Any suggestions on how to avoid this - I can't use sharepoint designer - so the rest of the solution is ideal
Left by Colin on Nov 10, 2015 11:43 AM

# re: Add a "new" button to a page in SharePoint
Requesting Gravatar...
Hi Colin,
Glad you found this useful.
There is really no magic to this solution, in principle it is just a link to the edit form, wrapped in some of the UI elements of SharePoint to make it look familiar. I suppose you could just as well use a button, format it the way you like to fit the UI of your SP version and theme, and then add a click handler to take you to the new item form. Simply set window.location.href to your desired URL inside the click handler. Good luck! :)
Left by Thorvald on Nov 11, 2015 1:05 PM

Your comment:
 (will show your gravatar)

Copyright © Thorvald Bøe | Powered by: