Tuesday, February 23, 2010

How to hide some of the SharePoint FormMenuItems buttons

To hide some of the FormMenuItem Buttons on a New, Display or Edit form in SharePoint is very easy.








All you have to do is to add a bit of Javascript to the form. You can quickly do this via the SharePoint designer.

Open the form on which you want to hide the menu item button in SharePoint Designer. Once opened switch to code view.



















Once you have the code view open, find the PlaceHolderBodyAreaClass section and insert the following code:

<script type="text/javascript">
  alert('Hello');
</script>










Save the form and hit F12 to view in browser.
You should now see an alert message popup when you access the form.
If you go the following message then it means that your Javascript is executing without any problems and that you can now proceed to add the relevant code to hide the desired buttons.
 
 
 
 
 
 
 
 
 
 
 
So, in SharePoint Designer, at the same location where you added the Javascript code, replace the following code:
<script type="text/javascript">

alert('Hello');
</script>
with:
<script type="text/javascript">

  hideFormMenuItems("Delete Item");


  function hideFormMenuItems()
  {
   var titleToHide="";
   var anchorTag;
   var allAnchorTags = document.getElementsByTagName('a');
   for(var i = 0; i < hideFormMenuItems.arguments.length; i++ )
   {
    titleToHide = hideFormMenuItems.arguments[i];
    if(titleToHide!='Alert Me')
    {
     for (var j = 0; j < allAnchorTags.length; j++)
     {
      anchorTag= allAnchorTags[j];
      if (anchorTag.title.indexOf(titleToHide)!=-1)
      {
anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling.style.display="none";
       break;
      }
     }
    }
    else
    {
     for (var k=0; k < allAnchorTags.length;k++)
     {
      anchorTag= allAnchorTags[k];
      if (anchorTag.id.indexOf("SubscribeButton")!=-1)
      {
anchorTag.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
       break;
      }
     }
    }
   }
  var allSpanTags = document.getElementsByTagName("span");
  var spanTag;
  var toolbarRow;
  var lastCell;
  for(var m=0; m < allSpanTags.length;m++)
  {
   spanTag = allSpanTags[m];
   if(spanTag.id=='part1')
   {
    toolbarRow = spanTag.childNodes[2].firstChild.firstChild;
    lastCell = toolbarRow.lastChild.previousSibling
    while(lastCell.style.display=='none')
    {
     lastCell = lastCell.previousSibling;
    }
    if(lastCell.innerText == '')
    {
     lastCell.style.display='none';
    }
    break;
   }
  }
 }
</script>


So, when done, save your form and run.... you will see the "Delete Item" button is hidden.
You can now add more javascript to only hide the button based on certain conditions.



Enjoy!!






6 comments:

Etienne said...

Very cool, works for me.....

But what must you change to the code to remove the "Alert Me" or "Edit Item"?

Anonymous said...

Great, i can hide all buttons but failed on "Export Event".
Any advise please?

Anonymous said...

can i hide button

Steven said...

The script works great in 2007 but it does not work in SharePoint 2010. Any suggestions for getting it to work in 2010?

digital signature certificate said...

You make some great points and I don't think I could have made them any better. Thanks for sharing !

Unknown said...

Hey, what if you want to do it in the EditForm.aspx.
Plase, could you help me?

Post a Comment