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.

when you are running the statement in your browser console, do you have same scope selected as your ribbon script? — Asher, May 23 '17 at 11:15

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Its probably because your script is running before the page is fully loaded.

Try adding a delay to the to the function Put a Delay in Javascript

edited May 23 '17 at 12:03

Community

1
1

answered Jul 25 '16 at 12:12

James Wood

17,286
4
46
89

score 0 · Accepted Answer · answered Jul 25 '16 at 14:53

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.
}

document.getElementById always returns "null" for ribbons

2 Answers2