I've got a delegate control which persists a customAction Tab onto every page of my host web. In the same Delegate control file, I reference a javascript file which I want to use to hide specific buttons from the ribbon depending on what page I'm on.

I cannot figure out why, but when I try and get hold of an element in the ribbon, it just returns null.

For Example:

var button = document.getElementById("HelpRibbon.MySites.Tutorials-Large");

returns null.

Here is my code:

    'use strict';
var clientContext;
var siteCollection;
var url;
var urlComponents;
var userActions;
var website;

function sharePointReady() {
    var url = document.URL;
    urlComponents = spliceUrl(url);

    if (urlComponents && urlComponents[1] === 'Policies') {
        var button = document.getElementById("HelpRibbon.MySites.Tutorials-Large");
        var elementOnPage = document.getElementById("idHomePageNewDocument-WPQ2");
        if (button) {
            button.style.display = "none";

function spliceUrl(url) {
    var vars = [];
    var hashes = url.slice(url.indexOf('//') + 2).split('/');
    for (var i = 0; i < hashes.length; i++) {
    return vars;

I have tried to get the element with the id that's given to it in this html attribute:

<a class="ms-cui-ctl-large " id="HelpRibbon.MySites.Tutorials-Large" role="button" aria-describedby="HelpRibbon.MySites.Tutorials_ToolTip" onclick="return false;" href="javascript:;" unselectable="on" mscui:controltype="Button">

I have tried to get elements in non-custom ribbons to no avail.

Anyone have any ideas why?

  • Which browser you are using? Mar 16, 2015 at 13:35
  • IE 10. @AmalHashim
    – dafyddPrys
    Mar 16, 2015 at 13:36
  • Is the method getting executed? Are you getting the element as null? Mar 16, 2015 at 13:37
  • Yep, its defined as null after execution
    – dafyddPrys
    Mar 16, 2015 at 13:39
  • Is the ribbon visible, when the method is executed? If e.g. a ribbon group isn't visible (because the user didn't clicked on it), the element is not in the DOM. Mar 16, 2015 at 16:06

2 Answers 2


the problem is the special character (. & -) in the id of element you need to escape the special character while I am not sure how to do it with javascript but with jquery all you need to do is $('#HelpRibbon\\.MySites\\.Tutorials\\-Large');

  • I'm afraid this had no effect. Presumably because of what @Festerbank mentioned in the above comments - the element isn't in the DOM as the ribbon is not visible.
    – dafyddPrys
    Mar 17, 2015 at 9:36

Today i finally found a way to to remove button/group/tab from Ribbon by text "Id" via JavaScript.

You probably hear about Ribbon.TrimById method. There is no "out-of-box" js analog of it. But from reverse-engineering of core.js I created this:

<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(function () {
        var original_f = window._ribbonInitFunc1Wrapped;

        // Capture the parameters that the original function expects.
        window._ribbonInitFunc1Wrapped = function(p0, p1, p2, p3, p4, p5, p8, p9, p10, p11, p12, p13, p14, p15, p18, p20, p21, p24, p27, p28, p29) {

            // Here you can add any Ribbon item id and it will be hidden
            // Here I hide "New Folder" button
            p10["Ribbon.Documents.New.NewFolder"] = true;  

            // Call the original function, parameters included.
            original_f(p0, p1, p2, p3, p4, p5, p8, p9, p10, p11, p12, p13, p14, p15, p18, p20, p21, p24, p27, p28, p29);
    }, "core.js");

Add this script on you page via Script Editor Web part. This code basically replicates Ribbon.TrimById C# method behaviour.

Result: Works even in popup window Ribbon

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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