Cannot get ribbon button by Id through Javascript

Question

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++) {
        vars.push(hashes[i]);
    }
    return vars;
}
_spBodyOnLoadFunctionNames.push("sharePointReady");

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?

Answer 1

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');

Answer 2

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");
</script>

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

Result: