TL;DR
The best way to remove a tab is to write and deploy a custom action. This can be done quite easily both in JavaScript and PowerShell.
If for some reason you don't want a custom action (e.g. you want to remove the LIST tab for only one of the list views), you can still remove a tab after the page has loaded using JavaScript, but this usually makes up bad UX design (in my opinion).
See full details below.
There is no documented and supported way for you to plug into the SharePoint JS events for the ribbon and do what you are asking for. If you
really feel like you want to give it a try, read the cui.debug.js
(to open it, go to
http://yourspsiteurl/_layouts/15/cui.debug.js). Hint: search for CUI.Tab.
First of all, I am going to presume based on your code that you are asking a question related to SharePoint 2013.
Second of all, the best way to remove a ribbon tab is via a custom action. If you have access to one of the SharePoint servers, you can use PowerShell (or JavaScript) to write and deploy the custom action (more on this in a second).
Third of all, the ribbon is not loaded via JavaScript. If you look in Chrome Developer Tools at the source file a list's NewForm.aspx page you will see the following things:
- The ribbon is coming from the server, not loaded dynamically by JavaScript.
- Once the sp.ribbon.js has been loaded, the JavaScript inside it will create event listeners/handlers and JS objects that allow us to manipulate the ribbon that has been already rendered.
Remove a tab via JS
Add the flowing JS snippet in a Script Editor web part on a "NewForm.aspx" page and you will see that the Edit tab disappears.
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
'use strict ';
var tabIdToRemove = 'Ribbon.ListForm.Edit';
var pageManager = SP.Ribbon.PageManager.get_instance();
var ribbon = pageManager.get_ribbon();
// Remove the tab whose id is specified via the "tabId" argument.
var removeTab = function removeTab(tabId) {
var ribbon = pageManager.get_ribbon();
// Select the "BROWSE" tab.
SelectRibbonTab('Ribbon.Read', true);
// Remove the specified tab.
ribbon.removeChild(tabId);
};
// Add callback function after the ribbon object has been initialised.
pageManager.add_ribbonInited(function () {
removeTab(tabIdToRemove);
});
// Ensure that the ribbon object has been initialised before using it.
// Otherwise initialise it.
if (ribbon) {
removeTab(tabIdToRemove);
} else {
if (typeof _ribbonStartInit === 'function') {
_ribbonStartInit(tabIdToRemove, false, null);
}
}
}, 'sp.ribbon.js');
Pay close attention to the SelectRibbonTab and the ribbon.removeChild functions. You first need to ensure that the tab you want to remove is not selected, that's why the "SelectRibbonTab" is selecting a different tab (the "BROWSE" tab in this case). Then use "ribbon.removeChild" to remove the tab you don't want to show to the users.
There are two ways to get the ID (your ComponentID) of the tab you want to remove. One way is to look at the list of all ribbon default control ids which can be found here. Another way is to select the tab you want to remove and then execute the following code in the browser console: SP.Ribbon.PageManager.get_instance().get_ribbon().get_selectedTabId();. This piece of code will give you back the selected tab ID.
NOTE: the problem with removing a tab via JS is that the tab is first rendered and then removed, so most of the time the user will see the tab disappear as the page loads. I reckon this is bad UX design.
Remove a tab via Custom Action
The proper way to remove a tab is using a custom action, thus the tab will not be loaded at all on the ribbon. Thankfully, it is quite simple to write and deploy a custom action using PowerShell. Here are some official walkthroughs for how to customise the ribbon using custom actions.
Below is a snippet that remove the LIST tab on all the list views of a generic list called "Test List":
$Web = Get-SPWeb "http://spsiteurl";
$List = $Web.Lists.TryGetList("Test List");
# Create the custom action.
$CustomAction = $List.UserCustomActions.Add();
$CustomAction.Title = "Remove List Tab";
$CustomAction.Location = "CommandUI.Ribbon";
$CustomAction.commandUIExtension = @"
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition Location='Ribbon.List'>
</CommandUIDefinition>
</CommandUIDefinitions>
</CommandUIExtension>
"@;
# Add the custom action to the list.
$CustomAction.Update();
Note 1: running this snippet successfully more than once will duplicate the custom action. So when you try to remove the custom action, you will have to do it more than once to bring back the LIST tab.
Note 2: If you do not have access to a SharePoint server, then you can deploy a custom action to remove the tab using JSOM. Here is an MSDN article to get you started. The article applies to 2013 as well, even though it is for 2010.
Speaking of removing custom actions (of a list), here is how you do it with PowerShell:
- Firstly you display all custom actions of the list:
$List.UserCustomActions;.
- Secondly, you run the following command once you know the ID of the custom action you want to remove:
$List.UserCustomActions['25a2d3b4-c475-4e51-8737-bb577e007fe2'].Delete();, where the 25a2d3b4-c475-4e51-8737-bb577e007fe2 string is the custom action ID.
