3

I'd like to know whether it is possible to remove ribbon tabs (in a list, page or form) working directly on the ribbon object via javascript.

I don't want to simply hide the post-rendered HTML of the ribbon using jquery. I want to directly act on the Ribbon object during the initialization phase of the page.

I can access the ribbon object in the init phase this way:

SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    (SP.Ribbon.PageManager.get_instance()).add_ribbonInited(ribbon_init);
}, "sp.ribbon.js");


function ribbon_init() {
    var ribbon = (SP.Ribbon.PageManager.get_instance()).get_ribbon();
}

By this code I can access the ribbon object but I don't see how to work on ribbon tabs so that I can remove them from the user interface before the ribbon has been rendered on the page.

I've understood that I can use ribbon.removeChild(ComponentID) to remove tabs, but I don't see how to know the required ComponendID in advance. Moreover contextual group tabs like Items|List are created dynamically on click event of the views in the aspx page. How to add a callback on these events end remove the created tabs? I see the ribbon (inherited) class has the method onComponentCreated but I don't find any example or documentation to work on that.

Thank you Emiliano

  • do you want to hide the whole ribbon or just 1 tab? – Gwny Apr 4 '16 at 11:21
  • @Gwny I want to know hide to remove ribbon completely or tabs, using the ribbon object from JS. – Emiliano Poggi Apr 4 '16 at 12:28
  • you could use the below css in the page <style type="text/css"> #s4-ribbonrow { display: none; } </style> – Sharanya Apr 11 '16 at 4:40
7
+100

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:

  1. The ribbon is coming from the server, not loaded dynamically by JavaScript.
  2. 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:

  1. Firstly you display all custom actions of the list: $List.UserCustomActions;.
  2. 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.
  • Thanks for the answer, I read it quickly but I can see immediately it's really pertinent to my question with nice clarifications via javascript. Hope to be back on this subject soon. – Emiliano Poggi Apr 11 '16 at 8:09
  • Glad I could help. Let me know if you have more questions on the topic. – Mihail-Florin Popa Apr 11 '16 at 12:37
0

If you want to hide the ribbon simply use SPSecurityTrimmedControl

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb">
<div id="s4-ribbonrow" …</div>
</SharePoint:SPSecurityTrimmedControl>

refer : I want to hide the SharePoint Ribbon Tabs (Browse, Page, etc) on my homepage based on permissions and such that they are stripped/trimmed when hidden

  • Thank you for your answer but I'm asking how to do it with JS acting on ribbon object. – Emiliano Poggi Mar 31 '16 at 12:47
  • how about this sharepoint247.wordpress.com/2013/05/24/… – dsouzajoel22 Mar 31 '16 at 12:50
  • Yes something like that, but it doe snot help so much. How do I know the id of the children for the selected tab? Using the removeChildren() just remove the tab and not all its contents ... – Emiliano Poggi Mar 31 '16 at 13:27
  • I started a bounty and improved the question with the hope to find the answer I'm searching for. – Emiliano Poggi Apr 4 '16 at 8:31
0

You can check for the below MSDN link. It has details about Default Ribbon Control Identifiers which can help you understand ribbon objects

https://msdn.microsoft.com/en-us/library/ee537543(en-us,office.14).aspx

Also check this one, problem similar to yours:

https://social.msdn.microsoft.com/Forums/office/en-US/aa762bd7-2702-4108-a534-14a72a4e7062/hidedisable-ribbon-items?forum=sharepointgeneralprevious

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.