Hiding the New Toolbar Button in SharePoint with jQuery
Guest Author: Bil Simser
Fear and Loathing
Another quick little fun thing today. Many times you might want (need) to hide the “New” button on a list toolbar. You know the one I mean?
Why would you want to do such a thing? For example on a project I’m building I actually call the NewForm.aspx page with a querystring because I want to pre-populate my form with some vales. As such, I don’t want users to create new items in a list without these references and since they have to come from another list I’m left with the problem of trying to restrict them from creating new items but still offer them the ability to use the features of the list like alerts, exporting to spreadsheets, etc. Yes, the “New” button isn’t available for readers of a list but for contributors it is and for admins you can’t just turn some of this stuff off easily.
If you do some Googling you’ll find some ways to do it. Some want you to modify the list schema, others have C# code to hide it, an others even want you to crack open SharePoint designer and butcher your AllItems.aspx page. Bazooka to kill a mosquito solution IMHO.
Here’s another simple way to do it with your Swiss Army knife, jQuery.
Ingredients
- jQuery (either installed on your server or remotely and referenced in a master page or via a Content Editor Web Part)
- 1 Content Editor Web Part
- 1 lines of jQuery/JavaScript
First you’ll need to have a list to modify. In this case I’ll use a Task list, but any list or library will do. Next go to the view page for the list that you want to do this on.
Click on Edit Page in the Actions menu and you’ll be allowed to add and edit web parts on the view page. This was a feature Microsoft smartly added and is fully supported. Now we can start adding our jQuery love.
Click on Add Web Part, browse for the CEWP and drop it on the page. Make sure you place it below the list form and also mark it as “Hidden” in the Layout options. This keeps the page looking as clean as it was originally.
If you inspect the HTML of any toolbar, it’s basically composed of something like this:
<table class="ms-menutoolbar">
<tr>
<td class="ms-toolbar">[toolbar item]</td>
<td class="ms-separator">[separator image]</td>
<td class="ms-toolbar">[toolbar item]</td>
<td class="ms-separator">[separator image]</td>
<td class="ms-toolbar">[toolbar item]</td>
<td class="ms-separator">[separator image]</td>
[etc.]
</tr>
</table>
We want to hide the first couple of <TD> elements which contain the “New” button as well as the separator. We can do this easily with this little nugget of jQuery:
<script src="/Javascript/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$('.ms-menutoolbar td:lt(4)').hide();
});
</script>
Add that to your CEWP you added to the NewForm.aspx page and you get this:
fooP! The “New” button disappears.
Sidenotes
The jQuery is super simple here (I try to write as little code as possible). When the document loads, find the toolbar class (‘.ms-menutoolbar’) then find the first 3 <TD> tags and hide them. One thing to note, when I wrote this today at work I was on IE7 and there were only 2 <TD> tags to hide (thus my jQuery selector was “td:lt(3)”). When I wrote this post I did so hitting my site using FireFox and lo and behold there seems to be an additional <TD> tag. In any case, you might have to experiment with the selectors to get the right number depending on your setup.
There are *always* many ways to do things in SharePoint. This is just one of them. I suppose you could also find the “id” of the buttons and remove/hide them but SharePoint IDs are always cryptic and not guaranteed to be the same from list to list, page to page, and site to site. I just find this method easy and low impact. YMMV.
Guest Author: Bil Simser
Fear and Loathing
Bil Simser is an independent Solutions Architect with over 15 years in software development. In his role as a mentor, he guides clients on how to implement development standards and guidelines, evaluates and recommends new tools and technologies, and helps teams and projects progress into the .NET world. Bil has been a Microsoft SharePoint MVP since 2004 and a member of the MSDN Canada Speakers Bureau. Bil currently lives and works in Alberta, Canada, with his wife, daughter, a Beowulf cluster of computers, every gaming console known to man, and a small menagerie of animals.
Please Join the Discussion
18 Responses to “Hiding the New Toolbar Button in SharePoint with jQuery”Speak and you will be heard.
We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!
EUSP eBooks
EUSP is Powered by RackSpace
© 2010 EndUserSharePoint.com · Streamline theme by StudioPress · Powered by WordPress · Log in
My approach was similar, big fan of jQuery for SharePoint. My code hides the Delete Item button in the SharePoint:Toolbar on a DispForm.
$(document).ready(function() {
$(”td.ms-titlearea”).hide();
$(”a[title='Delete Item']“).parent().parent().parent().hide();
});
Oops. Actually the second line hides the breadcrumb navigation, the third hides the button and I forgot to paste in the fourth which hides the separator bar. Sorry for any confusion.
$(document).ready(function() {
$(”td.ms-titlearea”).hide();
$(”a[title='Delete Item']“).parent().parent().parent().hide();
$(”td.ms-separator:nth-child(4)”).hide();
});
Another solution to this problem is to open the AllItems page in SP Designer and convert the list web part into an XSLT Data View. You can then select the New button and delete it while keeping everything else the same as the original list view web part (Actions and Settings buttons are still there). Save the page as AllItems2 and change the list properties to use it as the default AllItems page.
How would you hide a button in the middle of the Full Toolbar? Say the “Actions”. Thanks
The easiest way to discover which DOM objects you need to select and subsequently hide is with a Firefox plug-in called Firebug – http://getfirebug.com/
I was able to hide the “Actions” button and the vertical bar next to the button with the following. You mileage may vary.
$(document).ready(function() {
$(”#zz23_ListActionsMenu_t”).hide();
$(”td.ms-separator:nth-child(2)”).hide();
});
Good luck,
Jeff Langdon
Mathematica Policy Research
SharePoint Admin/Programmer
Twitter: @jlangdon
@Jeff: Nice example. One thing to be cautious of is the IDs that SharePoint uses. They’re all generated and generally when you see something like “zz23_xxx” as an ID, it’s actually using the ordinal position in say a navigation place. So hiding the “Actions” menu by looking for “zz23_xxx” might work on one system but someone else who might have a different configuration that actions menu may be “zz21_xxx”. Just something to keep in the back of your mind. IDs are not guaranteed to be the same from system to system.
@Jeff:
Thats what i was looking for to hide item in dispfrm Toolbar.
can you please tell me how can hide both workflows and Manage copies.
Thanks
Ron
@Jeff: i got it thanks for Tips
@Kermit
hidding JUST the action button can be done as follows:
$(document).ready(function(){
$(’.ms-menutoolbar td:eq(5)’).hide();
$(’.ms-menutoolbar td:eq(6)’).hide();
});
td 5 is the seperator between upload and action
td 6 is the action cell
for those that don’t know :eq matches a single element by its index
http://docs.jquery.com/Selectors/eq#index
Bryan – Thanks for the explanation on “:eq”. That should help open a few other techniques to people trying to manage the interface through CEWPs.
Use the following code.
First download 1.2.6.min.js library and put it in the 12/Layouts root.
Then copy paste following code in to CE webpart.
Done.If you want to hide all, replace lt(1) by lt(3).
$(document).ready(function(){ $('.ms-menutoolbar td:lt(1)').hide(); });–Avinash.Devkate—
Looks like we’re missing some formatting on this one….
Should be good to go, now.
Hi, Great post!
How would you hide or rename one of the options under the settings action item?
Thanks Frank
it doesn’t work for me. Do I need to install anything before dropping the CEWP to the page?
I was able to get Bil’s code working, but when i want to hide the Delete button on DispForm and EditForm using Jeff Langdon’s code, it doesn’t do anything.
I would like to add a custom link to the DispForm.aspx and dont know where to start. Any help would be appreciated. Thanks.
Post on Stump the Panel, and you’ll probably get a quicker response. — Mark