Hide/show ribbon button with javascript

Question

0.00/5 (No votes)

See more:

, +

I need a JS function to hide a button depending on the value of a field of the record.

I added the button on Ribbon Workbench and associated it with a command, which is associated with the JS action.

I set the Crm Parameter "Primary Control" to pass the execution context to the JS function.

I retrieved the field value by using the formContext, but how can I refer to the button itself to change its value?
Assuming that the executionContext refers to the button, I figured out I could use the "executionContext" itself to call the "setDisabled" method, but the intellisense suggests to me that it's not the right option.

I also figured out I should use the formContext to get the "name" attribute of the button, but where can I find it/which component should I look at? (As I added it from the Ribbon Workbench tool, I don't know where I should look at to see its property from CRM settings).
Moreover, it doesn't make sense to me, as the button is the executionContext itself, is it correct?

What I have tried:

*** On Ribbon Workbench ***

- I added a button
- I added a new command
- I associated the previous Custom Javascript Action to the command
- I added a CRM parameter with the value "Primary Control" to the action to pass the
executionContext to the JS function

*** On JS code ***

JavaScript

function hideButton(executionContext){

   var formContext = executionContext.getFormContext();
   var state = formContext.getAttribute("statecode").getValue();   
   if (state .getValue() == 1) {

      // I need a pointer to the button
      // to call setDisabled(true)
   }
   

}

Posted 22-Jan-21 7:05am

xhon

Updated 22-Jan-21 13:14pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter_in_2780 · Accepted Answer · 2021-01-22T13:14:00

Solution 1

I don't know how much your Ribbon Workbench will get in the way, but the simple way is to give the button an ID and use that.

in button definition

HTML

... id="themagicbutton" ...

in your JS

JavaScript

document.getElementById("themagicbutton").setDisabled(true);

Posted 22-Jan-21 13:14pm

Peter_in_2780

Comments

xhon 23-Jan-21 12:32pm

Thanks Peter.
As regards the event handler, I assume that I also need to specify this.OnLoad, is it correct? Or is there a way to tell JS that it's an OnLOad event from CRM/Ribbon workbench configuration?

I update the code as below, I'm not sure if I'm using the override of the OnLoad method correctly here:

function hideButton(executionContext) {
var executionContext = executionContext.getFormContext();
var formContext = executionContext.getFormContext();
var state = formContext.getAttribute("statecode").getValue();

this.OnLoad(executionContext){
if (state.getValue() == 1) {
document.getElementById("button_id").setDisabled(true);
}
else {
document.getElementById("button_id").setDisabled(false);
}

}

}

Peter_in_2780 25-Jan-21 20:25pm

I don't know how your Ribbon Workbench expects to wire up event handlers. I work with HTML and Javascript at the lowest level, so I'd write

<button id="mybutton" ... ... onclick="myJSfunc(args)" ... >

and I'd manipulate the button's disabled property directly

document.getElementById("mybutton").disabled = true;