SharePoint Customization Tricks - Part 1
page 1 of 1
Published: 04 Feb 2009
Unedited - Community Contributed
Abstract
In this article, Ayman examines how to hide List View Toolbar Menu Items in SharePoint. He begins with a short overview of the requirements and then provides a detailed explanation of the concept followed by relevant source code. He also examines how to make use of the function which he provided in the article.
by Ayman El-Hattab
Feedback
Average Rating: 
Views (Total / Last 10 Days): 31722/ 73

Introduction

This multipart series of articles is intended to help you getting ramped up with SharePoint Customization. It's about modifying the default SharePoint user experience, list forms customization, branding, skinning SharePoint portals, etc. When I looked around the "SharePoint Landscape", I noticed the lack of documented experiences in the SharePoint customization area and thus this multipart series of articles was born.

Prerequisites

First you need to have prerequisite skills in .NET Development and in particular ASP.NET Development, you should also have basic understanding of JavaScript, SharePoint and how to use it from the User Interface and of course you should have some experience in using the SharePoint customization tool (SharePoint Designer).

Trick 1: Hiding List View Toolbar Menu Items

I've gone through SharePoint projects on different scales; a common requirement among most of these projects is hiding some menu items that are implemented by default within the framework of SharePoint. The obvious choice from the Software Development Kit (SDK) is HideCustomAction !

After digging through the web, I found out the following:

·         The "HideCustomAction" feature can merely hide the items which have been rendered through the "CustomAction" feature framework such as Site Actions and Site setting.... etc.

·         ECB (Context Menu) items are rendered by JavaScript from Core.js file so we can't hide them via "HideCustomAction" feature. However, you can add a new menu item in the ECB menu through "CustomAction" feature and hide it again through The "HideCustomAction" feature. In other words," HideCustomAction" feature  can be used to hide the ECB menu items that you created via CustomAction but can't be used to hide the out of the box menu items. 

·         The ListViewWebPart menu items ( New menu, Upload menu, Actions menu,… etc ) are rendered through a class library as a web control from the Microsoft.SharePoint.dll so they can't be hidden through The "HideCustomAction" feature

Hmm, I thought of delving back into the world of JavaScript and I came up with some generic functions that can be used to hide any menu item in SharePoint and I decided to share them with the community.

Listing 1

hideListViewToolbarItems("Edit in Datasheet","export to Spreadsheet",
  "view rss feed","settings:create view"); 
function hideListViewToolbarItems()
 {        
var menuItem;         
 var menuItemName;
 var menuItemIndex=-1;
 var menuItemNames=new Array("edit in datasheet","open with windows explorer",
 "connect to outlook",'export to spreadsheet','view rss feed','alert me'
 ,"create column","settings:create view","list settings",
 "document library settings","explorer view","all documents",
 "all items","modify this view","view:create view","new document",
 "new item","new folder","upload document","upload multiple documents");
 var menuItems = new Array("EditInGridButton","OpenInExplorer","OfflineButton",
 "ExportToSpreadsheet","ViewRSS","SubscribeButton","AddColumn",
 "AddView","ListSettings","ListSettings","View1","DefaultView",
 "DefaultView","ModifyView","CreateView","New0","New0",
 "NewFolder","Upload","MultipleUpload");              
 var allMenuItems = document.getElementsByTagName('ie:menuitem');
 
 for(var i = 0; i < hideListViewToolbarItems.arguments.length; i++ ) 
 {                                                                           
           menuItemName= hideListViewToolbarItems.arguments[i].toLowerCase();
           for (j=0;jif(menuItemNames[j]==menuItemName)
                    {                                     
                              menuItemIndex = j;
                              break;
                    }
           }           
          menuItem=menuItems[menuItemIndex];
           for (var l = 0; l < allMenuItems.length; l++)
           {                  
                    if(menuItemName.indexOf(":")!=-1)
                    {
                              menuItemName = menuItemName.split(":")[1];
                    }
                    if (allMenuItems[l].id.indexOf(menuItem)!=-1 
                     && allMenuItems[l].text.toLowerCase() == menuItemName )
                    {                  
                              // For FireFox Compatibility
                              var parentNodeOfMenuItem = allMenuItems[l].parentNode;
                              parentNodeOfMenuItem.removeChild(allMenuItems[l]);
                    }
           }                  
 }
 }

You can use this function to hide any menu item rendered in the ListViewWebPart toolbar which is used in the list view pages. Just call the function and pass the menu item names as they appear in the toolbar, ignoring the case. Only one exception to that: when you need to hide "Create View" which appears twice, once in "List Settings", and then in the view selector. In order to resolve this conflict, just call the function as follows:

Listing 2

hideListViewToolbarItems("settings:create view") or 
hideListViewToolbarItems("view:create view")

Conclusion

In this article, you have learned a trick to hide SharePoint toolbar menu items with the help of relevant source code. You will learn more tricks in the upcoming article of the series.



User Comments

Title: Hello   
Name: Markus
Date: 3/25/2011 1:02:44 AM
Comment:
Great work
Title: Really nice article   
Name: Alwyn Duraisingh
Date: 12/9/2010 5:48:05 AM
Comment:
This is a very good explanation. I got the thing here.
Thank you very much
Title: how to do in SharePoint 2010   
Name: Akilaskk
Date: 7/13/2010 6:48:17 AM
Comment:
Hi,this is working for sharepoint 2007 sites, and how to hide the menu items in sharepoint 2010. Thanks in advance
Title: gaps 2   
Name: toby
Date: 4/17/2010 5:50:07 PM
Comment:
oops, my comment was too big and the script was cut off. here is a continuation:

menuItem=menuItems[menuItemIndex];
for (var l = 0; l < allMenuItems.length; l++)
{

if(menuItemName.indexOf(":")!=-1)
{
menuItemName = menuItemName.split(":")[1];
}

if (allMenuItems[l].id.indexOf(menuItem)!=-1
&& allMenuItems[l].text.toLowerCase() == menuItemName )
{
return allMenuItems[l];
}
}

}
Title: gaps   
Name: toby
Date: 4/17/2010 5:48:14 PM
Comment:
the listing has some issues. The j loop is corrupt.

@Oddo:
I put the script into a content editor web part. I also split up the function, in case I want to do other operations on the menu itmes than hide them:


function hideListViewToolbarItems()
{
for(var i = 0; i < hideListViewToolbarItems.arguments.length; i++ )
{

menuItemName= hideListViewToolbarItems.arguments[i].toLowerCase();

var item = getMenuItem(menuItemName);
// For FireFox Compatibility
var parentNodeOfMenuItem = item.parentNode;
parentNodeOfMenuItem.removeChild(item);
}
}

function getMenuItem(menuItemName)
{
var menuItem;
var menuItemName;
var menuItemIndex=-1;
var menuItemNames=new Array("edit in datasheet","open with windows explorer",
"connect to outlook",'export to spreadsheet','view rss feed','alert me'
,"create column","settings:create view","list settings",
"document library settings","explorer view","all documents",
"all items","modify this view","view:create view","new document",
"new item","new folder","upload document","upload multiple documents");
var menuItems = new Array("EditInGridButton","OpenInExplorer","OfflineButton",
"ExportToSpreadsheet","ViewRSS","SubscribeButton","AddColumn",
"AddView","ListSettings","ListSettings","View1","DefaultView",
"DefaultView","ModifyView","CreateView","New0","New0",
"NewFolder","Upload","MultipleUpload");
var allMenuItems = document.getElementsByTagName('ie:menuitem');


for (j=0;j < menuItemNames.length; j++)
{
if(menuItemNames[j]==menuItemName)
{
menuItemIndex = j;
break;
}
}
menuItem=menuItems
Title: how to rename the menu item   
Name: prem
Date: 1/5/2010 1:28:23 AM
Comment:
Hello,
I need to rename the menu item and its description ,I am using the text and description property to set the value. it works fine in IE but it doesn't work in mozilla,it seems to be the text and description properties is not supported in mozilla.
what can i do for mozilla ??
Title: How to use this in lists   
Name: Emmanuel
Date: 7/20/2009 8:42:59 AM
Comment:
Hello,

This works, but:
- if I have several lists, with several views, I will have to modify each correspondign page
- if I want to hide these menus only to some people, how can I do ?

Thanks
Title: Answer   
Name: Ayman El-Hattab
Date: 3/25/2009 6:07:03 PM
Comment:
Hello Mechael,
visit my blog for part 2 and 3 .
http://ayman=elhattab.blogspot.com
Title: Hide Items   
Name: Michael Oddo
Date: 3/25/2009 10:36:11 AM
Comment:
Can you provide some guidance of where the code should be "embedded" I'm not sure if I should add teh JavaScript code directly to the Webpart or not, and where should the code also be embedded to call the function and use?
Title: Hide Items   
Name: Ayman El-Hattab
Date: 2/12/2009 8:23:37 AM
Comment:
The code hides the items :)
let me know if you need any help
Title: Hide Items   
Name: John
Date: 2/12/2009 8:03:47 AM
Comment:
The code demonstrates how to find the name of each item; but where is the code that actually "hides" the item from view?
Title: SharePoint Hosting Services   
Name: SharePoint Hosting
Date: 2/9/2009 4:31:35 AM
Comment:
its too good and you can find more here.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 9/17/2014 7:30:18 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search