document.getElementById always returns "null" for ribbons

Question

I need to set the background color of one of the buttons in the form's ribbon. This isn't supported through Ribbon Workbench, so I have written following javascripts to achieve the same:

function setOpportunityRibbonsAppearance() {
    var submitToForeCastButton = parent.document.getElementById("opportunity|NoRelationship|Form|sfw.opportunity.Button1.Button");

    if (submitToForeCastButton != null) {
        submitToForeCastButton.style.backgroundColor = "lightyellow";
    }
}

I have registered this scripts in Form Load event. However the issue is that, I always get parent.document.getElementById as null only. Surprisingly, I am able to see the control while running the parent.document.getElementById statement in the browser's console, and can also change the styling attributes.

Can anyone please suggest what could be wrong here?

P.S. - I understand document.getElementById is not recommended to use in CRM, however, I am left with no other choice while trying to change the appearance of some of the buttons.

Any help on this, will be much appreciated.

Answer 1

You could upload an icon with a yellow background, to keep everything supported. You won't see text on yellow but it might work for you. Easy and standard.

To keep it unsupported and ugly, you could just keep on trying until you make it, setInterval allows for a function to be repeated:

function setOpportunityRibbonsAppearance() {
    var submitToForeCastButton = null;

    var interval = setInterval(function(){
        submitToForeCastButton = parent.document.getElementById("opportunity|NoRelationship|Form|sfw.opportunity.Button1.Button");

        if(submitToForeCastButton != null) {
            submitToForeCastButton.style.backgroundColor = "lightyellow";        
            clearInterval(interval);
        }
    }, 500); // Every 500ms. Adjust as needed, not too fast or browser will choke.
}