Hiding buttons on the SharePoint ECB with JavaScript

Some of my best discoveries come from forum questions. Not that I'm the first one to discover it, mind you -- I'm well aware that my wheel has probably been invented countless times -- but my mind grows best when I have to research a solution for someone else's problem (maybe that's why I like consulting).

Today's question was a simple one: how do I remove the Edit Item and Workflows buttons from the ECB (Edit Control Block) in a particular list view? If you're not familiar with the ECB for a list item, go to a list and select any list item; the List Item ECB will appear in the ribbon with commands like New Item, New Folder, etc. 

Since a list view is just an aspx file, we can add some client-side code -- either directly in the page, or by way of the Content Editor Web Part. Our code depends on jQuery, and looks like this:

$("td").hover(function() {
	hideEditAndWorkflows();
});
$("input").hover(function() {
	hideEditAndWorkflows();
});
function hideEditAndWorkflows() {
	$("#Ribbon\\.ListItem\\.Workflow").css("display", "none");
	$("#Ribbon\\.ListItem\\.Manage\\.EditProperties-Large").remove();
	}

If you're a jQuery novice, you'll want to visit jQuery.com and get the latest version -- simply upload the necessary JS file to a library and add a script link to it in the page (there's a ton of reference material out there, including the excellent documentation at the jQuery site).

You may wonder at the backslashes we're using in the hideEditAndWorkflows function.  Since these element IDs contain special characters (normally the dot denotes a class in CSS selectors), we have to escape them so that we can pass them properly through the system.

Once you have this code in place, you'll see the Edit and Workflows buttons for a moment after clicking the first list item on the page; after that, they should disappear and be completely unavailable to your average user.

Of course, client-side techniques like this will only go so far; if someone is technically adept and has the ability to perform these operations, he or she can open up the developer console and find the missing pieces.  Be aware of this whenever you manipulate the SharePoint UI with JavaScript; while it's fun and easy, this technique should never be a substitute for proper governance.

Enjoy!

No Comments