SharePoint/Project Server - Remove or hide ribbon button
SharePoint and Project Server has a lot of functionality
in the ribbon. Sometimes it can be beneficial to hide some of the buttons for the users so they do not get too confused.
The correct way to hide ribbon buttons is to create a
SharePoint feature in Visual Studio and create some XML to override the ribbon.
However, if you are not that familiar with developing or Visual Studio it can
be a prohibitive task to do.
If you would like to go with the feature solution here
is a link for a nice guide on how to do it: http://msdn.microsoft.com/en-us/library/office/ff408060(v=office.14).aspx
In this post I will go through how to remove ribbon
buttons only through the standard Script Editor webpart and Javascript. However
you don’t have to know Javascript to complete the task.
The downside of this approach is that your have to add
the webpart on all pages where you want to remove the ribbon.
Remove Ribbon Buttons
In Project Server on a PDP page lets say you have a
ribbon which looks like this:
(click on image for better quality)
Now in this PWA instance we do not have any Project
Sites and they are also disabled in PWA Settings. Therefore, we want to remove
the Project Sites button from the ribbon and the Quick Launch. We would also
like to remove the Documents, Issues and Risks links.
To do this go to the PDP site and add a new Script
Editor webpart.
(click on image for better quality)
In the script editor webpart click EDIT SNIPPET and
add the following javascript code:
<script>
function removeLinks() {
try {
var elements = null;
try {
elements = document.getElementsByClassName('static menu-item
ms-core-listMenu-item ms-displayInline ms-navedit-linkNode')
} catch (ex) {
//IE8 and lower
elements = document.querySelectorAll('.static.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode');
}
for (i = 0; i <
elements.length; i++) {
var elm = elements[i];
if (elm.innerHTML.indexOf('Project Site') >= 0) {
elm.style.display = 'none';
}
}
var ribbonBtn = document.getElementById("Ribbon.Tabs.PDP.Home.GoTo-Large-2-1");
ribbonBtn.style.display = 'none';
ribbonBtn = document.getElementById("Ribbon.Tabs.PDP.Home.GoTo.GoToDocuments-Medium");
ribbonBtn.style.display = 'none';
ribbonBtn = document.getElementById("Ribbon.Tabs.PDP.Home.GoTo-Large-2-2");
ribbonBtn.style.display = 'none';
ribbonBtn = document.getElementById("Ribbon.Tabs.PDP.Home.GoTo.GoToWorkspace-Large");
ribbonBtn.style.display = 'none';
} catch (ex) { }
setTimeout(removeLinks, 500);
}
removeLinks();
</script>
Script Editor webpart:
(click on image for better quality)
Click Insert and click Stop Editing.
Now the buttons for the project site will be hidden.
(click on image for better quality)
Remember you have to do this for all pages or PDP’s
where the buttons should be removed.
Hiding other buttons
If you want to remove other buttons simply replace the
button id in the Javascript with the button you want to remove.
<script>
function removeLinks() {
try {
var ribbonBtn = document.getElementById("Ribbon.Tabs.PDP.Home.GoTo-Large-2-1");
ribbonBtn.style.display = 'none';
} catch (ex) { }
setTimeout(removeLinks, 500);
}
removeLinks();
</script>
There are many ways of finding the button id, but I find
the easiest way is to use Firefox and Firebug.
(click on image for better quality)
Below i have listed the most common ID's used in the PWA.
The ID's are listed in the same order as the buttons are placed in the ribbon (starting from the left).
(click on image for better quality)
Ribbon.ContextualTabs.ProjectCenter.Home.Editing
-
Ribbon.ContextualTabs.ProjectCenter.Home.Editing.NewProject-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Editing.OpenProject-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Editing.Import-Large
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo
-
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo-LargeLarge-0
o
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo.GoToTeamBuilder-Large
o
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo.GoToResourcePlan-Large
o
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo.GoToProjectPermissions-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo-LargeLarge-1
o
Ribbon.ContextualTabs.ProjectCenter.Home.GoTo.GoToCheckin-Large
Ribbon.ContextualTabs.ProjectCenter.Home.Navigate
-
Ribbon.ContextualTabs.ProjectCenter.Home.Navigate.ZoomIn-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Navigate.ZoomOut-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Navigate.ScrollTask-Large
Ribbon.ContextualTabs.ProjectCenter.Home.Data
-
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-0
-
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-1
(icons)
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-1-0
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-1-1
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-1-2
-
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-2
(dropdowns)
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-2-0
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-2-1
o
Ribbon.ContextualTabs.ProjectCenter.Home.Data-Large-2-2
Ribbon.ContextualTabs.ProjectCenter.Home.Timeline
-
Ribbon.ContextualTabs.ProjectCenter.Home.Timeline.AddProject-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Timeline.AddTasks-Large
Ribbon.ContextualTabs.ProjectCenter.Home.Share
-
Ribbon.ContextualTabs.ProjectCenter.Home.Share.ExportExcel-Large
-
Ribbon.ContextualTabs.ProjectCenter.Home.Share.Print-Large
Ribbon.ContextualTabs.ProjectCenter.Home.ShowHide
-
Ribbon.ContextualTabs.ProjectCenter.Home.ShowHide-Large-0-0
-
Ribbon.ContextualTabs.ProjectCenter.Home.ShowHide-Large-0-1
Ribbon.ContextualTabs.ProjectCenter.Home.ChangeProjectType
Ribbon.ContextualTabs.ProjectCenter.Home.Publish
Ribbon.ContextualTabs.ProjectCenter.Home.Publish
(click on image for better quality)
Ribbon.Tabs.PDP.Home.Project
-
Ribbon.Tabs.PDP.Home.Project.Edit-Large
-
Ribbon.Tabs.PDP.Home.Project.Save-Large
-
Ribbon.Tabs.PDP.Home.Project.Close-Large
Ribbon.Tabs.PDP.Home.GoTo
-
Ribbon.Tabs.PDP.Home.GoTo-Large-0
-
Ribbon.Tabs.PDP.Home.GoTo-Large-1
-
Ribbon.Tabs.PDP.Home.GoTo-Large-2
o
Ribbon.Tabs.PDP.Home.GoTo-Large-2-0
o
Ribbon.Tabs.PDP.Home.GoTo-Large-2-1
o
Ribbon.Tabs.PDP.Home.GoTo-Large-2-2
-
Ribbon.Tabs.PDP.Home.GoTo-Large-3
o
Ribbon.Tabs.PDP.Home.GoTo-Large-3-0
o
Ribbon.Tabs.PDP.Home.GoTo-Large-3-1
o
Ribbon.Tabs.PDP.Home.GoTo-Large-3-2
Ribbon.Tabs.PDP.Home.Page
-
Ribbon.Tabs.PDP.Home.Page.Previous-Large
-
Ribbon.Tabs.PDP.Home.Page.Next-Large
(click on image for better quality)
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard-LargeMedium-0
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard-LargeMedium-1
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard-LargeMedium-1-0
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard-LargeMedium-1-1
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Clipboard-LargeMedium-1-2
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Update
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Update.EditPWAProject-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Update.SaveProject-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Update.Close-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Update.PublishProject-Large
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-0
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-0-0
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-0-1
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-1
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-2
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Editing-Large-3
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Task
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Task.NewTask-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Task.DeleteTask-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Task.DeleteTask-Large
(Duplicate ID in Project Server 2013)
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-0
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-1
(icons)
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-1-0
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-1-1
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-1-2
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-2
(dropdowns)
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-2-0
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-2-1
o
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Data-Large-2-2
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Navigate
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Navigate.ZoomIn-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Navigate.ZoomOut-Large
-
Ribbon.ContextualTabs.ProjectDrilldown.Tasks.Navigate.ScrollTask-Large
Sharepoint 2013/Project Server 2013 - Remove Or Hide Ribbon Button >>>>> Download Now
ReplyDelete>>>>> Download Full
Sharepoint 2013/Project Server 2013 - Remove Or Hide Ribbon Button >>>>> Download LINK
>>>>> Download Now
Sharepoint 2013/Project Server 2013 - Remove Or Hide Ribbon Button >>>>> Download Full
>>>>> Download LINK uP